Bootstrap折叠导航栏点击后快速消失问题求助

我之前也碰到过一模一样的Bootstrap折叠导航栏闪一下就消失的问题！太闹心了，不过后来排查出几个常见的原因，你可以挨个试试：

• 修复重复的ID问题：你代码里所有的nav-link都用了同一个id="links"，但HTML里ID必须是唯一的，重复的ID可能会干扰Bootstrap的事件绑定逻辑。把这些ID改成class就好：

  <li class="nav-item"><a class="nav-link links" href="distance.html">Distance</a></li>
  <li class="nav-item"><a class="nav-link links" href="#">Test</a></li>
  <!-- 其他链接同理修改 -->
  

• 检查是否重复加载jQuery：如果页面其他地方还引入了另一个版本的jQuery，会覆盖Bootstrap最初绑定的事件，导致折叠功能异常。你可以打开浏览器控制台（F12），输入jQuery.fn.jquery回车，确认显示的版本是你引入的3.5.1；同时检查页面源码里有没有多余的<script>标签引入其他jQuery文件。

• 排查自定义JS的干扰：如果你自己写了全局点击事件（比如点击body就关闭弹窗/折叠菜单），会导致点击导航栏图标展开后，事件冒泡到body触发关闭。比如类似这样的代码：

  $('body').on('click', function() {
    $('#navbarNav').collapse('hide');
  });
  

  解决办法是给导航栏元素添加事件阻止冒泡：

  $('.navbar').on('click', function(e) {
    e.stopPropagation();
  });
  

• 验证Bootstrap脚本加载状态：你目前的加载顺序（jQuery → Popper → Bootstrap JS）是完全正确的，但可以再确认一下这些脚本有没有加载失败：打开浏览器F12的Network标签，刷新页面，看这三个脚本的状态是不是200 OK。

另外，你也可以尝试用规范的Bootstrap导航栏结构（加上navbar-brand，虽然不是强制要求，但完整结构能避免一些潜在问题）：

<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="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item"><a class="nav-link links" href="distance.html">Distance</a></li>
      <li class="nav-item"><a class="nav-link links" href="#">Test</a></li>
      <li class="nav-item"><a class="nav-link links" href="#">Test</a></li>
      <li class="nav-item"><a class="nav-link links" href="#">Test</a></li>
    </ul>
  </div>
</nav>

最后记得打开浏览器控制台看看有没有报错信息，很多时候脚本错误会直接导致功能失效~

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