Bootstrap Collapse折叠组件无法正常折叠问题求助

• 依赖引入错误/缺失
  Bootstrap折叠组件依赖对应JS脚本才能生效，不同版本的适配要求不同：
  1. 若使用Bootstrap 4.x版本：需要按顺序引入jQuery、Popper.js、Bootstrap.min.js三个脚本，顺序不能颠倒，必须放在HTML文档</body>标签之前加载，引入示例如下：

  <!-- 替换为你本地对应文件的实际路径 -->
  <script src="jquery.min.js"></script>
  <script src="popper.min.js"></script>
  <script src="bootstrap.min.js"></script>
  

  2. 若使用Bootstrap 5.x版本：官方已废弃data-toggle、data-target属性，替换为data-bs-toggle、data-bs-target，无需引入jQuery，仅需引入Bootstrap自带的合并JS脚本即可。你当前的导航按钮代码需要修改为：

  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive">
    <span class="navbar-toggler-icon"></span>
  </button>
  

  对应Bootstrap 5的脚本引入示例：

  <!-- 替换为你本地对应文件的实际路径 -->
  <script src="bootstrap.bundle.min.js"></script>
  

• 引入顺序错误
  如果已经完成所有依赖引入，检查脚本的加载顺序：Bootstrap的JS文件必须放在它的依赖脚本之后加载，否则会因找不到依赖无法初始化折叠功能。
• 脚本冲突/语法报错
  打开浏览器控制台（按F12切换到Console标签），检查是否存在JS报错，例如$未定义、Bootstrap未定义等提示，可直接定位到缺失的依赖或语法问题。

你当前贴出的导航结构本身没有语法错误，绝大多数失效情况都是版本不匹配或者依赖缺失导致，优先排查上述两点即可解决问题。

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