Bootstrap5如何实现展开一个折叠元素时其他折叠项自动关闭

核心实现逻辑 #

• data-bs-parent属性不生效通常是因为Bootstrap 5的手风琴效果要求严格的DOM层级关系，且data-bs-parent属性要添加在折叠面板元素上，而非触发按钮上
• 所有折叠面板必须放置在同一个父容器内，父容器需要设置唯一ID，每个折叠面板的data-bs-parent属性值指向该父容器的ID选择器

完整可运行代码示例 #

<!-- 父容器，设置唯一ID  -->
<div id="accordionContainer">
  <!-- 第一个折叠项  -->
  <p>
    <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample1">
      第一个折叠项触发链接
    </a>
    <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample1" aria-expanded="false" aria-controls="collapseExample1">
      第一个折叠项触发按钮
    </button>
  </p>
  <!-- 折叠面板添加data-bs-parent属性，值为父容器的ID选择器 -->
  <div class="collapse" id="collapseExample1" data-bs-parent="#accordionContainer">
    <div class="card card-body">
      第一个折叠面板的内容，打开这个面板时其他已打开的面板会自动关闭
    </div>
  </div>

  <!-- 第二个折叠项  -->
  <p>
    <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample2">
      第二个折叠项触发链接
    </a>
    <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
      第二个折叠项触发按钮
    </button>
  </p>
  <div class="collapse" id="collapseExample2" data-bs-parent="#accordionContainer">
    <div class="card card-body">
      第二个折叠面板的内容，打开这个面板时其他已打开的面板会自动关闭
    </div>
  </div>
</div>

常见踩坑注意事项 #

• 每个折叠项的ID必须唯一，触发元素的data-bs-target/href要和对应折叠面板的ID完全匹配
• data-bs-parent属性必须添加在.collapse元素上，不要加在触发按钮上
• 父容器的ID选择器前必须带#符号，和CSS选择器写法一致

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