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

Posted 2023-03-05

【中文标题】您如何在 Bootstrap 3 中保持多个折叠打开？

【英文标题】：How do you keep multiple collapses open in Bootstrap 3?

【发布时间】：2014-05-18 09:33:46

【问题描述】：

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

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

【参考方案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。