Bootstrap中打开新Collapse折叠面板时如何自动关闭已打开的旧面板

解决方案 #

你要的效果是Bootstrap Collapse自带的手风琴(Accordion) 模式，无需额外编写JavaScript代码，仅调整两处代码即可实现：

1. 给所有折叠面板外层套一个统一的父容器，为该父容器设置唯一ID，例如id="foldGroup"
2. 给每个class="collapse"的折叠内容节点，添加data-bs-parent="#foldGroup"属性，绑定到外层父容器即可

修改后的完整代码如下：

<!-- 新增外层统一父容器 -->
<div id="foldGroup">
  <div class="my-2">
    <a class="btn btn-success text-start form-control fs-3" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
     <i class="fas fa-minus"></i> 1. PRODAM10 DAMLA NEDİR?
    </a>
    <!-- 给collapse节点添加data-bs-parent属性 -->
    <div class="collapse" id="collapseExample" data-bs-parent="#foldGroup">
      <div class="card card-body border-4 fs-4">
        lorem ipsum...
      </div>
    </div>
  </div>

  <div class="my-2">
    <a class="btn btn-success text-start form-control fs-3" data-bs-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample2">
     <i class="fas fa-minus"></i> 2. Nasıl Etki Eder?
    </a>
    <!-- 给collapse节点添加data-bs-parent属性 -->
    <div class="collapse" id="collapseExample2" data-bs-parent="#foldGroup">
      <div class="card card-body border-4 fs-4">
        lorem ipsum...
      </div>
    </div>
  </div>
</div>

如果你使用的是Bootstrap 3/4版本，只需将属性名改为data-parent即可，其他逻辑保持一致。

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