移动端Navbar点击链接不折叠，添加data-toggle后链接失效的问题

我完全懂你碰到的这个麻烦——点击导航栏里的链接能正常跳转到对应锚点，但移动端的折叠菜单却不会自动收起来；可要是给链接加上data-toggle属性，菜单倒是能折叠了，链接又没法跳转了。这其实是因为Bootstrap的折叠组件在触发时会拦截链接的默认跳转行为，所以得用点小技巧来兼顾两者。

先放一下你提供的原始HTML代码方便对照：

<nav class="navbar navbar-expand-lg fixed-top activate-menu navbar-light bg-light">
  <a class="navbar-brand" href="#showcase">MyWebsite</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      <li>
        <a class="nav-link" href="#showcase">Home</a>
      </li>
      <li>
        <a class="nav-link" href="#features">Feature</a>
      </li>
      <li>
        <a class="nav-link" href="#teams">Team</a>
      </li>
      <li>
        <a class="nav-link" href="#contact">Contact</a>
      </li>
    </ul>
  </div>
</nav>

下面给你两种实用的解决方案：

方法一：用jQuery实现（适合依赖jQuery的Bootstrap版本） #

如果你的项目已经引入了jQuery（Bootstrap 3和早期Bootstrap 4版本通常需要），可以给所有导航链接绑定点击事件，点击时先手动触发菜单折叠，同时保留跳转功能：

$(document).ready(function() {
  // 给所有.nav-link绑定点击事件
  $('.nav-link').on('click', function() {
    // 找到折叠菜单容器，调用Bootstrap的collapse方法隐藏它
    $('#navbarSupportedContent').collapse('hide');
  });
});

这段代码会在页面DOM加载完成后生效，点击任何导航链接时，都会先收起折叠菜单，同时链接的默认跳转行为不受影响，完美实现你要的效果。

方法二：纯原生JavaScript实现（不依赖jQuery） #

如果你不想用jQuery，或者用的是不依赖jQuery的Bootstrap 5+版本，用原生JS也能搞定：

document.addEventListener('DOMContentLoaded', function() {
  // 获取所有导航链接和折叠菜单容器
  const navLinks = document.querySelectorAll('.nav-link');
  const collapseMenu = document.getElementById('navbarSupportedContent');
  const togglerBtn = document.querySelector('.navbar-toggler');

  // 给每个链接绑定点击事件
  navLinks.forEach(link => {
    link.addEventListener('click', function() {
      // 检查菜单是否处于展开状态（有show类）
      if (collapseMenu.classList.contains('show')) {
        // 移除show类来收起菜单
        collapseMenu.classList.remove('show');
        // 更新切换按钮的aria-expanded属性，保证 accessibility
        togglerBtn.setAttribute('aria-expanded', 'false');
      }
    });
  });
});

为什么之前的方案会失效？ #

当你给链接直接添加data-toggle="collapse"和data-target属性时，Bootstrap的内置JS会拦截链接的默认跳转行为，优先执行折叠操作，所以链接就没法正常跳转到锚点了。上面的两种方法都是先执行菜单折叠，同时不阻止链接的默认跳转事件，这样就能同时实现两个功能。

最后别忘了确认你的页面已经正确引入了Bootstrap的CSS和JS文件，不然折叠功能本身就没法正常工作哦！

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