所以我正在使用 Bootstrap Javascript 组件 Collapse 和 Modal。我添加了一个简单的可点击元素来在折叠标题中打开一个模式。我使用 jQuery 的 stopPropagation 来阻止崩溃的 click 事件从冒泡到 Bootstrap Javascipt 回调。我特意在我的 Jsfiddle 中保留了大部分未折叠的行,因为我的问题仅在内容超出查看屏幕高度时才会发生。
我的问题是,当我单击编辑按钮时内容发生变化,并且我单击编辑的折叠行在屏幕上不再可见:
$(function () {
$(".collapse").collapse();
$(".accordion").find('.btnEdit').click(function (ev) {
ev.stopPropagation()
});
$(".btnEdit").click(function () {
//ev.stopPropagation();
$('#myModal').modal('show');
});
});
<div class="accordion" id="accordions">
<div class="accordion-group">
<div class="accordion-heading"><a href="#group-1" data-parent="#accordions" data-toggle="collapse" class="accordion-toggle">Accordion Group 1 <span class="btnEdit"><i class="icon-edit"></i>Click here to see issue</span></a>
</div>
<div id="group-1" class="accordion-body collapse in">
<div class="accordion-inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus egestas
tempor vulputate. Donec auctor libero eu justo eleifend eget dapibus mauris
blandit. Mauris faucibus elementum mauris, a vehicula elit auctor ut. Ut
pellentesque faucibus tempor. Curabitur a nisi purus.</p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading"><a href="#group-2" data-parent="#accordions" data-toggle="collapse" class="accordion-toggle">Accordion Group 2</a>
</div>
<div id="group-2" class="accordion-body collapse">
<div class="accordion-inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus egestas
tempor vulputate. Donec auctor libero eu justo eleifend eget dapibus mauris
blandit. Mauris faucibus elementum mauris, a vehicula elit auctor ut. Ut
pellentesque faucibus tempor. Curabitur a nisi purus.</p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading"> <a href="#group-3" data-parent="#accordions" data-toggle="collapse" class="accordion-toggle">Accordion Group 3</a>
</div>
<div id="group-3" class="accordion-body collapse">
<div class="accordion-inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus egestas
tempor vulputate. Donec auctor libero eu justo eleifend eget dapibus mauris
blandit. Mauris faucibus elementum mauris, a vehicula elit auctor ut. Ut
pellentesque faucibus tempor. Curabitur a nisi purus.</p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">
Collapsible Group 4
</a>
</div>
<div id="collapseFour" class="accordion-body collapse">
<div class="accordion-inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus egestas
tempor vulputate. Donec auctor libero eu justo eleifend eget dapibus mauris
blandit. Mauris faucibus elementum mauris, a vehicula elit auctor ut. Ut
pellentesque faucibus tempor. Curabitur a nisi purus.</p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFive">
Collapsible Group 5
</a>
</div>
<div id="collapseFive" class="accordion-body collapse">
<div class="accordion-inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus egestas
tempor vulputate. Donec auctor libero eu justo eleifend eget dapibus mauris
blandit. Mauris faucibus elementum mauris, a vehicula elit auctor ut. Ut
pellentesque faucibus tempor. Curabitur a nisi purus.</p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse6">
Collapsible Group 6
</a>
</div>
<div id="collapse6" class="accordion-body collapse">
<div class="accordion-inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus egestas
tempor vulputate. Donec auctor libero eu justo eleifend eget dapibus mauris
blandit. Mauris faucibus elementum mauris, a vehicula elit auctor ut. Ut
pellentesque faucibus tempor. Curabitur a nisi purus.</p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse7">
Collapsible Group 7
</a>
</div>
<div id="collapse7" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse8">
Collapsible Group 8
</a>
</div>
<div id="collapse8" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse9">
Collapsible Group 9
</a>
</div>
<div id="collapse9" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse10">
Collapsible Group 10
</a>
</div>
<div id="collapse10" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse11">
Collapsible Group 11
</a>
</div>
<div id="collapse11" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
</div>
<div id="myModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>