Bootstrap 3.3.7版本导航栏点击navbar-toggle无法折叠问题

核心原因排查 #

• 最常见问题：依赖引入错误
  Bootstrap 3的折叠交互完全依赖jQuery库，必须满足两个要求：
  1. 引入顺序必须是先引入jQuery，再引入Bootstrap JS文件
  2. jQuery版本必须适配Bootstrap 3.3.7，要求版本≥1.9.1且<3.0.0，高版本jQuery（3.x）不兼容Bootstrap 3
     正确引入示例：

<script src="jquery/2.2.4/jquery.min.js"></script>
<script src="bootstrap/3.3.7/js/bootstrap.min.js"></script>

• 检查id匹配冲突
  你提供的代码中data-target="#bs-nav-demo"和折叠容器的id是完全匹配的，这部分无需修改。需要确认页面内没有其他元素使用了bs-nav-demo这个id，重复id会导致JS选择器触发异常。
• 检查自定义样式干扰
  如果你的自定义CSS中给.navbar-collapse或者.collapse类设置了display !important、height !important这类强制样式，会覆盖Bootstrap默认的折叠状态切换逻辑，导致点击无响应，可以暂时注释掉导航相关的自定义CSS验证问题。
• 检查JS执行报错
  打开浏览器开发者工具的Console面板，查看是否有其他JS运行报错，任意前置JS报错都会阻塞后续Bootstrap折叠事件的绑定和执行。

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