Bootstrap 4 Collapse实现展开某区域时收起其他区域的方法

嘿，这个需求很常见！要实现Bootstrap 4 Collapse展开一个自动收起其他的手风琴效果，核心就是利用data-parent属性配合一个共同的父容器。我来帮你把代码调整成符合要求的样子：

实现步骤拆解： #

• 首先给所有折叠相关元素套一个共同的父容器，并给这个容器设置唯一ID（比如accordionGroup）。
• 给每个触发折叠的按钮/链接添加data-parent="#你的父容器ID"属性，Bootstrap会自动识别同组的折叠区域，保证同一时间只有一个展开。
• 确保每个折叠内容区域的ID唯一，且和触发元素的href/data-target对应正确。

完整代码示例： #

<!-- 共同的父容器，必须设置ID -->
<div id="accordionGroup">
  <!-- 第一个折叠触发按钮 -->
  <a class="btn btn-primary" 
     data-toggle="collapse" 
     href="#collapseExample" 
     role="button" 
     aria-expanded="false" 
     aria-controls="collapseExample"
     data-parent="#accordionGroup"> <!-- 关键：添加data-parent -->
    content 1
  </a>

  <!-- 第二个折叠触发按钮 -->
  <button class="btn btn-primary" 
          type="button" 
          data-toggle="collapse" 
          data-target="#collapseExample2" 
          aria-expanded="false" 
          aria-controls="collapseExample2"
          data-parent="#accordionGroup"> <!-- 关键：添加data-parent -->
    content 2
  </button>

  <!-- 第一个折叠内容区域 -->
  <div class="collapse" id="collapseExample">
    <div class="card card-body">
      这里是content 1的折叠内容，展开它的时候content 2会自动收起~
    </div>
  </div>

  <!-- 第二个折叠内容区域 -->
  <div class="collapse" id="collapseExample2">
    <div class="card card-body">
      这里是content 2的折叠内容，同理展开它时content 1会自动收起！
    </div>
  </div>
</div>

注意点： #

• data-parent的属性值必须是父容器的完整ID选择器（带#号），不能写错。
• 折叠内容区域用card组件包裹是Bootstrap的推荐写法，视觉上更美观，也符合组件设计规范，当然如果不需要也可以去掉。
• 保持aria-expanded和aria-controls属性的正确性，这对无障碍访问很友好，Bootstrap会自动切换aria-expanded的状态（true/false）。

这样改完之后，你点击任意一个折叠按钮，其他已经展开的区域就会自动收起啦！

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