Bootstrap Collapse组件问题：点击其他按钮时已展开面板未折叠

嘿，这个问题其实是因为你还没用到Bootstrap的手风琴（accordion）特性哦！默认的collapse组件是允许同时展开多个面板的，要实现点击新按钮时自动收起其他已展开的面板，只需要做几个小修改：

修改步骤： #

• 给所有折叠面板的父容器（也就是你的.bd-example容器）添加一个唯一ID（比如accordionExample），同时加上accordion类，用来标识这是一个手风琴组。
• 给每个.collapse面板添加data-parent="#accordionExample"属性，这样它们就会被关联到同一个手风琴组下，实现互斥展开。
• 修正按钮的aria-controls属性：你原来的按钮2和3的aria-controls都是collapseExample，这是错误的，要改成对应面板的ID（collapseExample2和collapseExample3），保证无障碍访问的正确性。

修改后的完整代码： #

<div class="bd-example accordion" id="accordionExample" data-example-id="">
  <p>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
      Button 1
    </button>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
      Button 2
    </button>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample3" aria-expanded="false" aria-controls="collapseExample3">
      Button 3
    </button>
  </p>
  <div class="collapse" id="collapseExample" data-parent="#accordionExample">
    <div class="card card-block">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
    </div>
  </div>
  <div class="collapse" id="collapseExample2" data-parent="#accordionExample">
    <div class="card card-block">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident 2.
    </div>
  </div>
  <div class="collapse" id="collapseExample3" data-parent="#accordionExample">
    <div class="card card-block">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident 3.
    </div>
  </div>
</div>

原理说明： #

data-parent属性是Bootstrap手风琴组件的核心，它指定了当前折叠面板所属的父容器。当你点击某个按钮展开对应的面板时，Bootstrap会自动查找同一data-parent下的其他已展开面板，并将它们折叠起来，从而实现“一次只展开一个面板”的效果。

内容的提问来源于stack exchange，提问作者DM Vamsi