Question

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

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

Answer 1

更新2018

Bootstrap 4

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

Bootstrap 3

您只需删除normally used in the accordion markup的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选择器以应用collapse。请务必将类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>

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

Answer 4

引导程序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>

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

4 个答案:

此处为 2021 年：