Umbraco集成Bootstrap移动端菜单切换后立即收起问题求助

这种点击切换按钮后菜单闪一下就收的情况，我碰到过好多次，大概率是JS加载问题或者HTML结构不符合Bootstrap要求导致的，咱们一步步来排查修复：

1. 检查Bootstrap JS的依赖加载顺序 #

Bootstrap的JS组件（包括折叠菜单）依赖jQuery和Popper.js（Bootstrap 4及以上版本），必须按正确顺序加载，而且不能重复加载：

<!-- 先加载jQuery -->
<script src="~/scripts/jquery.min.js"></script>
<!-- 然后加载Popper.js -->
<script src="~/scripts/popper.min.js"></script>
<!-- 最后加载Bootstrap JS -->
<script src="~/scripts/bootstrap.min.js"></script>

注意：如果Umbraco的模板或分部视图里重复引用了这些文件，会触发JS冲突，直接导致菜单异常。

2. 验证导航栏的HTML结构是否合规 #

Bootstrap折叠导航栏有严格的结构要求，重点核对这几个核心属性：

• 切换按钮的data-toggle="collapse"和data-target="#你的折叠容器ID"，必须和折叠容器的id完全匹配
• 折叠容器必须添加collapse navbar-collapse类，且ID与按钮的data-target一致

参考正确的结构示例：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">站点品牌</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNavCollapse" aria-controls="mainNavCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="mainNavCollapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">首页 <span class="sr-only">(当前)</span></a>
      </li>
      <!-- 其他菜单项 -->
    </ul>
  </div>
</nav>

你可以对照自己的DOM输出，检查有没有拼写错误或者属性不匹配的情况。

3. 排查自定义JS的干扰 #

如果你的站点里有自定义的点击事件绑定，比如给导航切换按钮加了额外的click逻辑却没有阻止默认行为，就会和Bootstrap的折叠事件冲突。

检查你的自定义JS代码，比如是否有类似这样的代码：

$('.navbar-toggler').click(function() {
  // 这里如果没有阻止默认事件，会和Bootstrap的事件冲突
});

如果有的话，需要添加event.preventDefault()或者return false来避免冲突，或者直接移除重复的事件绑定。

4. 确认没有加载多版本Bootstrap #

有时候Umbraco的插件或预设模板可能已经加载了Bootstrap，而你又自行引用了一次，两个版本的JS会互相干扰，导致菜单行为异常。可以打开浏览器开发者工具（F12），在「网络」标签搜索bootstrap.js，查看是否加载了多个文件，若有则删除多余的引用即可。

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