您如何在 Bootstrap 3 中保持多个折叠打开？答案

【问题标题】：How do you keep multiple collapses open in Bootstrap 3?您如何在 Bootstrap 3 中保持多个折叠打开？
【发布时间】：2014-05-18 09:33:46
【问题描述】：

Bootstrap 通常会在您单击打开其他折叠项时关闭它。

是否有选项或技巧可以让它保持折叠打开，除非在不改变面板组外观和布局的情况下明确关闭？

【问题讨论】：

标签： javascript html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

2021 年在这里：

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

引导文档：

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>

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

【讨论】：

【解决方案2】：

2020 年更新

引导程序 4

How do you make Twitter Bootstrap Accordion keep one group open?

引导程序 3

您可以删除data-parent 属性，即normally used in the accordion markup。

<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

【讨论】：

谢谢，这真的很有帮助。在阅读了您的提示后，我很快在文档中找到了它：getbootstrap.com/javascript/#collapse -> Options -> parent
参考链接帮助了我。谢谢
@trusktr 您可能希望将其设为Answer，因为它帮助了许多像我这样的人。谢谢。

【解决方案3】：

引导程序 4

不需要 JAVASCRIPT

可以实现多个 id 为 #accordion{{$i}} 的 div，每个手风琴只有 1 child 引用其父级 1

    <div class=""
         id="accordion{{$i}}">

        <h3 class="" data-toggle="collapse"
            data-target="#collapse{{$i}}"
            aria-expanded="true"
            aria-controls="collapse{{$i}}" class="mb-0">
            Hai Im the clickable
        </h3>

        <div id="collapse{{$i}}"
             class="collapse"
             aria-labelledby="heading{{$i}}"
             data-parent="#accordion{{$i}}">
            <p>Hai Im the collapsible content</p>
        </div>
    </div>

【讨论】：

【解决方案4】：

查看此演示： http://plnkr.co/edit/OxbVII?p=preview

想法：

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

【讨论】：