Bootstrap Collapse实现单次仅显示一个折叠面板问题求助

嗨，刚看完你的代码，问题核心在于没有给折叠面板设置统一的手风琴组关联，Bootstrap的互斥展开效果需要让面板们知道它们属于同一个父组，这样点击时才会自动收起其他面板。

具体修改方案： #

• 给每个带有collapse类的面板元素添加data-parent="#accordion"属性，这个值要和你外层的父容器id="accordion"对应，这样Bootstrap就会把这些面板归为一组，实现点击互斥展开。
• 按钮部分的写法没问题，第三个按钮用href和前两个用data-target的效果一致，不用特意修改，保持原样就行。

修改后的完整代码： #

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group btn-group-lg m-auto mt-5" role="group" aria-label="First group">
    <button type="button" class="btn active btn-secondary" data-toggle="collapse" data-target="#collapseInformation" aria-expanded="false" aria-controls="collapseInformation">
      <span class="content">Go one</span>
    </button>
    <button type="button" class="btn btn-secondary" data-toggle="collapse" data-target="#collapseCampus" aria-expanded="false" aria-controls="collapseCampus">
      <span class="content">Go two</span>
    </button>
    <button type="button" class="btn btn-secondary" data-toggle="collapse" href="#collapseNearby" role="button" aria-expanded="false" aria-controls="collapseNearby">
      <span class="content">Go three</span>
    </button>
  </div>
</div>
<div id="accordion" role="tablist">
  <!-- 添加data-parent="#accordion"关联手风琴组 -->
  <div class="collapse-information collapse show w-75 m-auto" role="tab" id="collapseInformation" data-parent="#accordion">
    <div class="card card-body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue laoreet quam, eu convallis tortor condimentum nec. Pellentesque sed felis id ex pellentesque ultrices. Aenean in tempor lorem, eu porta enim. Aliquam erat volutpat. Nulla sit amet congue dolor, id porta urna. Suspendisse vel libero eleifend, accumsan nunc id, vulputate ligula. Nunc eleifend dictum velit, vel euismod augue pretium et. Proin rhoncus odio eleifend finibus mattis. Morbi purus odio, aliquam non augue quis, viverra iaculis velit. Fusce dictum elit vel venenatis posuere. Donec nisl nibh, semper vel lacus et, facilisis tempor velit. Proin ullamcorper, diam ac lobortis venenatis, lorem lectus dapibus nulla, eget dapibus leo ex ut leo. Suspendisse sed nisl sollicitudin, vulputate ipsum a, commodo tortor. In bibendum placerat nibh non congue. Curabitur condimentum dolor turpis, vel pharetra dui egestas a. Integer consequat accumsan rutrum. Morbi et felis quam. Sed suscipit placerat dolor, nec vulputate dolor. Maecenas porta ex ut arcu mattis, sit amet convallis urna scelerisque.
    </div>
  </div>
  <!-- 添加data-parent="#accordion"关联手风琴组 -->
  <div class="collapse-campus collapse w-75 m-auto" role="tab" id="collapseCampus" data-parent="#accordion">
    <div class="card card-body">
      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>
  <!-- 添加data-parent="#accordion"关联手风琴组 -->
  <div class="collapse-nearby collapse w-75 m-auto" role="tab" id="collapseNearby" data-parent="#accordion">
    <div class="card card-body">
      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>

原理说明： #

Bootstrap的Collapse组件中，data-parent属性是手风琴效果的核心——它指定了当前面板所属的父容器，当一个面板被触发展开时，同一父容器下所有带有collapse类的面板都会被自动收起，这样就实现了你想要的“点击一个展开，其余自动收起”的互斥效果。之前的代码缺少这个属性，所以每个面板都是独立状态，点击时不会影响其他面板。

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