Bootstrap4 toggle折叠按钮展开后无法收起的问题求助

核心问题根源 #

你遇到的这类折叠交互失效，90%以上的场景都来自多版本依赖重复引入的冲突。
Bootstrap4的所有JS交互组件（折叠、模态框、下拉菜单）对依赖的版本一致性、引入顺序有严格要求：

• 必须仅引入单份适配的jQuery（对应Bootstrap4.6要求3.5.x以上版本）、单份适配的Popper.js（对应要求1.16.x版本，不兼容Popper2+）、单份匹配版本的Bootstrap JS文件
• 绝对不能同时引入多份不同版本的jQuery、Popper、Bootstrap脚本文件，这类重复引入会直接导致组件事件绑定被多次覆写：第一次点击时展开逻辑正常触发，但折叠状态的类名切换、收起事件被后加载的不兼容脚本截断，最终出现能开不能关的异常表现。

分步修复操作 #

• 第一步：清理所有零散重复的依赖引入标签，仅保留一套版本严格对齐的依赖组合，引入顺序必须严格遵循「jQuery → Popper.js → Bootstrap JS」的顺序，不能颠倒：
  正确的引入代码片段示例：

  <!-- 单份jQuery -->
  <script src="js/jquery-3.5.1.min.js"></script>
  <!-- 单份匹配版本的Popper -->
  <script src="js/popper.min.js"></script>
  <!-- 单份Bootstrap JS -->
  <script src="js/bootstrap.min.js"></script>
  

• 第二步：检查折叠组件的属性绑定是否存在语法错误：
  • 折叠触发按钮必须携带data-toggle="collapse"属性，通过href或data-target指向的目标选择器，必须和折叠容器的id完全匹配，不能存在拼写、大小写不一致的问题
  • 折叠目标容器必须携带基础的collapse类，仅初始需要展开显示时才额外添加show类，不要随意给容器加其他会影响类名切换的自定义样式类
• 第三步：排查手动初始化代码的逻辑截断问题：
  如果是按官方文档写JS手动初始化折叠组件，检查是否在绑定的点击事件里写了阻断默认行为的逻辑（比如无意义的e.preventDefault()、e.stopPropagation()），这类逻辑会直接截断Bootstrap内置的折叠切换流程，导致收起动作无法触发。

常见踩坑场景：很多开发者从不同教程、demo页面复制代码片段时，会把demo自带的依赖引入标签也一并复制到自己的页面里，最终凑出来的页面可能同时加载了jQuery1.x、jQuery3.x、Bootstrap3的JS、Bootstrap4的JS多份脚本，脚本之间会互相抢占DOM事件的绑定权限，最终就会出现第一次交互正常、后续交互失效的奇怪表现，并非折叠插件本身的逻辑缺陷。

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