MVC 5中Bootstrap响应式导航栏点击后立即收起问题求助

这种导航栏展开后马上收起的问题，我之前在MVC5项目里用Bootswatch时也碰到过，大概率是jQuery与Bootstrap的加载顺序/版本不兼容，或是重复引入资源导致的，咱们一步步来排查：

1. 检查JS资源的加载顺序与重复引入 #

Bootstrap的JS完全依赖jQuery，所以必须保证jQuery先于Bootstrap JS加载，同时不能重复引入Bootstrap JS（否则会导致事件被绑定两次，点击一次触发两次toggle，看起来就是展开又立刻收起）。

正确的BundleConfig配置示例： #

// 先加载jQuery
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
            "~/Scripts/jquery-{version}.js"));

// 再加载Bootstrap JS
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
            "~/Scripts/bootstrap.js"));

同时检查_Layout.cshtml，确保没有通过<script>标签手动重复引入bootstrap.js，只能通过Bundle或者手动二选一。

2. 验证Bootswatch与Bootstrap的版本匹配 #

Bootswatch的样式是基于特定版本的Bootstrap定制的，如果样式文件和项目中Bootstrap JS版本不匹配，就会出现交互异常：

• 打开你下载的Bootswatch版bootstrap.css，开头的注释会标注它基于的Bootstrap版本（比如/*! Bootstrap v3.3.7 */）
• 对比项目中Scripts/bootstrap.js开头的版本号，必须完全一致
• MVC5默认使用Bootstrap 3.x，如果你手动升级到了4.x，就会和Bootswatch的3.x样式不兼容，建议回退到对应版本

3. 检查导航栏HTML结构的正确性 #

Bootswatch的导航栏必须严格遵循Bootstrap 3的结构规范，重点确认以下几点：

• 汉堡按钮的data-toggle="collapse"和data-target="#xxx"属性必须正确绑定到菜单容器的ID：

  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav-collapse" aria-expanded="false">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
  </button>
  

• 对应的菜单容器必须包含collapse navbar-collapse类，且ID与data-target一致：

  <div class="collapse navbar-collapse" id="main-nav-collapse">
      <!-- 你的导航菜单项 -->
  </div>
  

如果ID不匹配或者类名缺失，就会导致点击后交互异常。

4. 排查自定义JS或第三方插件的冲突 #

如果项目中有自定义JS或者其他第三方插件，可能会和Bootstrap的事件绑定冲突。可以临时注释掉所有自定义JS代码，再测试导航栏是否正常，逐步恢复代码来定位冲突点。

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