Twitter-bootstrap 崩溃插件-如何启用多个“组”可以打开？

我正在使用这个崩溃插件，我想知道如何能够同时打开多个组。在他们的演示页面:

Http://twitter.github.com/bootstrap/javascript.html#collapse

在给定的时间只允许打开一个。我想这是手风琴的预期行为，但我怎样才能改变它，使开放一组不崩溃其他？

49895 次浏览
小开
最佳答案

只是不要使用 data-parent属性:

<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
Collapsible Group Item #1
</a>


</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">Item 1 Body</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">Item 2 Body</div>
</div>
</div>
</div>

Http://jsfiddle.net/hjf6j/2/

小开

用于独立展开/折叠每个面板并允许在每个页面上使用多个手风琴的解决方案。

如果您所有的手风琴和组有独特的 ID，那么您可以有多少手风琴在页面上，你想要的

每个手风琴都需要一个唯一的 ID:

<div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true">

每个标题都需要一个唯一的 ID

<div class="panel-heading" role="tab" id="headingOne">

每个主体都需要一个惟一的 id，如果适用的话，还需要一个引用，即要使用的标题

<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

JSFiddle 上的示例: http://jsfiddle.net/qnhd7Lu3/3/

小开 
$('#multipleOPened').on('click', function() {
if($(this).is(':checked')) {
$('#accordion .collapse').removeAttr('data-parent');
} else {
$('#accordion .collapse').attr('data-parent','#accordion');
}
});

JSFiddle 上的 bootstrap 4示例: Https://jsfiddle.net/tw1j7lf3/7/


提交答案