Bootstrap折叠面板无法正常关闭，请求排查问题根源

这种点击折叠后自动重新展开的现象，本质是折叠组件的触发逻辑被执行了两次——一次触发关闭，紧接着又触发了展开，导致视觉上看起来是关闭动画后立刻弹回来。结合你描述的show类先移除后又自动添加的情况，最常见的原因和解决方法如下：

1. 检查Bootstrap JS是否重复引入 #

Bootstrap的Collapse组件会在JS加载时自动绑定data-bs-toggle元素的点击事件，如果页面里重复引入了bootstrap.bundle.min.js（或bootstrap.js+popper.js），就会导致同一个触发元素被绑定两次点击事件，一次点击触发两次toggle操作。

• 打开浏览器控制台的「网络」面板，搜索bootstrap，确认只有一条JS请求。
• 检查HTML代码，确保<script>标签里只引入了一次Bootstrap的JS文件，不要同时在头部和底部引入，也不要在框架（比如Vue/React）的配置里已经引入后又手动添加。

2. 排查手动初始化代码是否重复执行 #

如果你自己通过JS手动初始化了Collapse组件：

new bootstrap.Collapse(document.getElementById('your-collapse-id'), {
  toggle: false
});

要确保这段代码只执行一次：

• 不要把初始化代码放在会重复触发的回调里（比如滚动事件、定时器、组件的mounted钩子重复执行）。
• 可以用一个变量标记是否已经初始化，避免重复创建实例：

  let collapseInstance = null;
  if (!collapseInstance) {
    collapseInstance = new bootstrap.Collapse(document.getElementById('your-collapse-id'));
  }
  

3. 验证HTML属性配置是否正确 #

确认触发元素和折叠面板的关联属性没有错误：

• 触发元素必须有data-bs-toggle="collapse"，且data-bs-target的选择器（比如#collapseOne）准确对应折叠面板的ID。
• 折叠面板必须包含.collapse类，默认展开时额外加.show类。
• 如果是手风琴（Accordion）结构，要确保折叠面板的data-bs-parent属性指向手风琴容器的ID，避免多个面板同时展开。

正确的结构示例：

<!-- 手风琴容器 -->
<div id="accordionExample">
  <!-- 触发按钮 -->
  <div class="card-header">
    <button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
      面板标题
    </button>
  </div>
  <!-- 折叠面板 -->
  <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
    <div class="card-body">
      面板内容
    </div>
  </div>
</div>

4. 检查自定义事件是否冲突 #

如果你给触发元素绑定了自定义的click事件，看看是不是干扰了Bootstrap的内置逻辑：

• 避免在自定义事件里调用event.preventDefault()或者手动触发toggle方法，比如：

  // 错误示例：会和Bootstrap的内置事件冲突
  document.querySelector('.btn-link').addEventListener('click', function(e) {
    e.preventDefault();
    // 手动调用toggle会导致重复触发
    bootstrap.Collapse.getInstance(document.getElementById('collapseOne')).toggle();
  });
  

• 如果需要扩展折叠行为，应该使用Bootstrap提供的事件钩子（比如show.bs.collapse、hidden.bs.collapse），而不是直接覆盖点击事件。

内容的提问来源于stack exchange，提问作者Paul-E