Bootstrap collapse折叠组无法正常隐藏/折叠问题咨询

你的折叠功能失效是两个错误导致的：

• 资源引入不全：只引入了Bootstrap的CSS文件，没有引入Bootstrap的JavaScript文件。所有带交互的Bootstrap组件（折叠、下拉、模态框等）都必须依赖Bootstrap自身的JS才能运行，你额外引入的jQuery对Bootstrap 5版本的组件没有任何作用，Bootstrap 5从该版本开始已经移除了jQuery依赖。
• 属性语法不匹配：你用的是Bootstrap 5.1.3版本，但HTML里写的是Bootstrap 4版本的旧属性规则。Bootstrap 5把所有组件的data-*属性统一加了bs前缀做命名空间，旧的无bs前缀的属性不会被框架识别。

1. 补充引入Bootstrap 5的JS bundle文件，这个文件已经内置了组件需要的所有依赖（包括popper），不需要额外引入其他脚本：

<!-- 你已引入的Bootstrap CSS保留即可 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<!-- 新增下面这行JS引入 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- 之前引入的jQuery可以保留也可以删除，不影响折叠组件运行 -->

2. 替换HTML里所有不符合Bootstrap 5规则的属性：

• 所有data-toggle="collapse"替换为data-bs-toggle="collapse"
• 所有data-target="#折叠区ID"替换为data-bs-target="#折叠区ID"
• 所有data-parent="#手风琴ID"替换为data-bs-parent="#手风琴ID"
• 最外层id为accordion的容器新增accordion类，保证手风琴互斥逻辑和默认样式正常

修复后的完整可运行代码如下：

<div id="accordion" class="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-bs-parent="#accordion">
      <div class="card-body">
        Test text
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-bs-parent="#accordion">
      <div class="card-body">
        Test text
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-bs-parent="#accordion">
      <div class="card-body">
        Test text
      </div>
    </div>
  </div>
</div>

不需要额外编写任何自定义JavaScript代码，Bootstrap会自动识别页面上带data-bs-*属性的元素完成交互绑定，修改完成后折叠展开、同组互斥的功能都会正常生效。

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