74

我正在使用折叠插件，我想知道如何使多个组同时打开。在他们的演示页面中：

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

在特定时间只允许打开一个。我想这是手风琴的预期行为，但我怎样才能改变它，以便打开一组不会折叠其他组？

4

3 回答 3

168

只是不要使用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/

于 2013-03-29T05:40:07.023 回答
12

对于一个解决方案，它可以独立地展开/折叠每个面板并允许在每个页面上使用多个手风琴。

如果您所有的手风琴和组都有唯一的 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/

于 2015-05-10T11:26:07.783 回答
1 
$('#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/

于 2018-06-29T08:58:07.617 回答