Bootstrap 4折叠导航栏点击隐藏失效，请求排查问题

咱们一步步来排查你遇到的这个问题，点击导航项后折叠菜单没反应，通常是下面几个常见原因导致的，对应解决方法也给你列出来了：

1. jQuery未正确引入或加载顺序错误 #

Bootstrap 4的折叠（collapse）组件是依赖jQuery的，所以必须确保jQuery在Bootstrap JS之前加载，否则你的点击事件代码根本无法触发Bootstrap的折叠功能。

正确的加载顺序示例：

<!-- 先加载jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<!-- 再加载Bootstrap的JS文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

如果你的项目里没引入jQuery，或者把Bootstrap JS放在jQuery前面，那这段折叠代码肯定不会生效。

2. 代码未等待DOM加载完成就执行 #

如果你的JS代码放在页面<head>标签里，或者在页面元素还没渲染完成的时候就运行了，那$('.navbar-nav>li>a')根本找不到对应的导航链接元素，自然绑定不了点击事件。

解决方法很简单，把你的代码包裹在$(document).ready()里，确保DOM完全加载后再执行：

$(document).ready(function() {
  $('.navbar-nav>li>a').on('click', function(){
    $('.navbar-collapse').collapse('hide');
  });
});

或者直接把这段JS代码放到页面底部、</body>标签的前面，这样页面元素已经渲染完成，也能正常找到目标元素。

3. 试试更稳妥的事件委托写法 #

有时候如果导航项是动态生成的，或者选择器匹配有细微问题，直接绑定到子元素上会失效。这时候可以用事件委托，把点击事件绑定到父元素.navbar-nav上，这样不管子元素什么时候生成，都能触发事件：

$(document).ready(function() {
  $('.navbar-nav').on('click', 'li>a', function(){
    $('.navbar-collapse').collapse('hide');
  });
});

4. 确认折叠组件已正确初始化 #

从你给出的导航栏HTML代码来看，按钮的data-toggle="collapse"和data-target="#navbarResponsive"是正确的，对应的折叠容器也有id="navbarResponsive"，这部分应该没问题。但如果有其他自定义JS干扰了折叠组件的初始化，可以手动触发初始化：

$(document).ready(function() {
  // 确保折叠组件初始化完成
  $('#navbarResponsive').collapse();
  $('.navbar-nav>li>a').on('click', function(){
    $('.navbar-collapse').collapse('hide');
  });
});

先从前面两个原因排查（jQuery加载和DOM就绪），这是最容易出问题的地方，大部分情况下解决这两个问题就能让代码正常工作了。

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