你如何在Bootstrap 3中保持多个崩溃？

Question

当您单击其中一个打开它时,Bootstrap通常会关闭其他折叠.

除非明确关闭而不改变面板组的外观和布局,否则是否有选项或黑客使其保持折叠打开？

Answer 1

更新2018年

Bootstrap 4

你如何让Twitter Bootstrap Accordion保持一组开放？

Bootstrap 3

您只需删除手风琴标记中通常使用的data-parent属性即可.

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
     ... 

http://bootply.com/127843

Answer 2

请参阅此演示:http: //plnkr.co/edit/OxbVII？p = preview

理念:

只需添加data-toggle="collapse"和一个data-target元素,即可自动分配对可折叠元素的控制.该data-target属性接受CSS选择器以应用collapseto.请务必将该类添加collapse到可折叠元素中.如果您希望它默认打开,请添加其他类in.

Answer 3

2021 在这里：

假设您使用的是 Bootstrap 4，您可以简单地data-parent从具有collapse该类的元素中删除该属性。

引导文档：

https://getbootstrap.com/docs/4.6/components/collapse/#accordion-example

他们使用以下 collapse元素：

<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
    <div class="card-body">
        Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
    </div>
</div>

这通过属性订阅了collapseon 事件#accordionExample，这是主要的手风琴元素data-parent。删除data-parent，collapse当另一个扩展时 将不再关闭。