本文介绍如何通过原生 javascript 实现：当用户点击 bootstrap 5 导航栏中的任意链接时，自动收起已展开的移动端汉堡菜单，提升移动端用户体验。
在使用 Bootstrap 5 构建响应式导航栏（Navbar）时，其默认行为是：点击右上角「汉堡图标」可展开/收起菜单，但点击菜单内的 <a class="nav-link"> 链接后，菜单仍保持展开状态——这对移动设备极不友好。理想效果是：点击任一导航链接即跳转锚点（或页面），同时立即关闭下拉菜单。
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 官方交互逻辑的前提下，实现「点击即收起」的丝滑体验，显著提升移动端导航可用性。
