我正在使用折叠插件,并且想知道如何启用多个组同时打开。在他们的演示页面中:
http://twitter.github.com/bootstrap/javascript.html#collapse
在给定时间只允许打开一个。我想这是手风琴的预期行为,但是如何更改它,以使打开一个组不会折叠其他组?
我正在使用折叠插件,并且想知道如何启用多个组同时打开。在他们的演示页面中:
http://twitter.github.com/bootstrap/javascript.html#collapse
在给定时间只允许打开一个。我想这是手风琴的预期行为,但是如何更改它,以使打开一个组不会折叠其他组?
Answers:
只是不要使用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>
对于依赖于每个面板展开/折叠并允许每个页面上有多个手风琴的解决方案。
如果您的所有手风琴和组都具有唯一的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/