如何在点击导航链接后自动关闭 Bootstrap 5 响应式汉堡菜单

本文介绍如何通过原生 javascript 实现：当用户点击 bootstrap 5 导航栏中的任意链接时，自动收起已展开的移动端汉堡菜单，提升移动端用户体验。

在使用 Bootstrap 5 构建响应式导航栏（

Navbar）时，其默认行为是：点击右上角「汉堡图标」可展开/收起菜单，但点击菜单内的 链接后，菜单仍保持展开状态——这对移动设备极不友好。理想效果是：点击任一导航链接即跳转锚点（或页面），同时立即关闭下拉菜单。

Bootstrap 5 的折叠组件（Collapse）依赖 .show 类控制可见性，并通过 data-bs-toggle="collapse" 与 .navbar-toggler 按钮联动。因此，不建议直接操作 style.display（如 display: none），这会破坏 Bootstrap 的内部状态管理，导致后续无法正常展开（正如提问者遇到的问题）。

✅ 正确做法是：模拟点击 .navbar-toggler 按钮，触发 Bootstrap 内置的收起逻辑。只需监听所有 .nav-link 元素的点击事件，在菜单处于展开状态（即 #navbarResponsive 包含 .show 类）时，主动调用 navbarToggler.click() 即可。

以下是推荐的解决方案（兼容 Bootstrap 5.3+，无需 jQuery）：

document.addEventListener('DOMContentLoaded', () => {
  // 获取所有导航链接
  document.querySelectorAll('.nav-link').forEach(link => {
    link.addEventListener('click', () => {
      const navbarCollapse = document.getElementById('navbarResponsive');
      const navbarToggler = document.querySelector('.navbar-toggler');

      // 仅在菜单已展开时触发收起
      if (navbarCollapse && navbarCollapse.classList.contains('show') && navbarToggler) {
        navbarToggler.click(); // 触发 Bootstrap 内置收起逻辑
      }
    });
  });
});

? 关键注意事项：

• ✅ 使用 document.querySelectorAll('.nav-link') 而非 'nav-link'（缺少点号会导致选择器失效）；
• ✅ 必须在 DOM 加载完成后执行（DOMContentLoaded），否则元素可能尚未挂载；
• ✅ 判断 navbarCollapse.classList.contains('show') 是安全前提，避免无意义触发；
• ✅ 确保引入了 Bootstrap 5 的 JS（含 Popper），且顺序正确（先 Popper，再 Bootstrap JS）；
• ❌ 避免直接修改 style.display 或手动移除 .show 类——这将绕过 Collapse 插件的状态管理，引发不可预测行为。

? 进阶提示：若项目使用模块化构建（如 ES modules），可封装为可复用函数；若需支持平滑滚动锚点跳转，可在 navbarToggler.click() 后添加 event.preventDefault() 并配合 scrollIntoView()，但需注意与原生锚点行为的协调。

通过以上方法，你就能在保留 Bootstrap 官方交互逻辑的前提下，实现「点击即收起」的丝滑体验，显著提升移动端导航可用性。