Twitter-bootstrap 折叠插件 - 如何启用多个“组”打开？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15696365/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter-bootstrap collapse plugin - how to enable multiple "groups" to be opened?
提问by RobVious
I'm working with the collapse plugin and I'm wondering how I can enable multiple groups to be open at the same time. In their demo page:
我正在使用折叠插件，我想知道如何同时打开多个组。在他们的演示页面中：
http://twitter.github.com/bootstrap/javascript.html#collapse
http://twitter.github.com/bootstrap/javascript.html#collapse
Only one is allowed to be open at a given time. I suppose this is the expected behavior of accordions, but how can I change it so that opening one group does not collapse the others?
在给定的时间只允许打开一个。我想这是手风琴的预期行为，但是我该如何更改它以便打开一组不会折叠其他组？
回答by sody
Just don't use data-parentattributes:
只是不要使用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>
回答by dinamite
For a solution that expands/collapses each panel dependently and allows multiple accordions on each page.
对于独立展开/折叠每个面板并允许每个页面上有多个手风琴的解决方案。
If all your accordions and groups have unique ids then you can have as many accordions on the page as you want
如果您所有的手风琴和组都有唯一的 ID，那么您可以在页面上拥有任意数量的手风琴
Each accordion needs a unique id:
每个手风琴都需要一个唯一的 id：
<div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true">
Each heading needs a unique id
每个标题都需要一个唯一的 id
<div class="panel-heading" role="tab" id="headingOne">
Each body needs a unique id, and if applicable a reference the the heading to be used
每个正文都需要一个唯一的 ID，如果适用，还需要引用要使用的标题
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
Example on JSFiddle: http://jsfiddle.net/qnhd7Lu3/3/
JSFiddle 示例：http: //jsfiddle.net/qnhd7Lu3/3/
回答by Regis TEDONE
$('#multipleOPened').on('click', function() {
if($(this).is(':checked')) {
$('#accordion .collapse').removeAttr('data-parent');
} else {
$('#accordion .collapse').attr('data-parent','#accordion');
}
});
An example with bootstrap 4 on JSFiddle : https://jsfiddle.net/tw1j7Lf3/7/
JSFiddle 上的 bootstrap 4 示例：https://jsfiddle.net/tw1j7Lf3/7/
