bootstrap 5 中点击导航链接后汉堡菜单不自动收起，需手动调用 collapse('hide') 或模拟 navbar-toggler.click()；spa 中须用事件委托并监听 hidden.bs.collapse 避免视觉残留。
点击导航链接后汉堡菜单不收起，是 Bootstrap 5 的默认行为——它不会自动监听 .nav-link 的点击事件。直接写 element.style.display = 'none' 会破坏 Collapse 状态同步，导致后续点不开菜单。
用 collapse('hide') 手动触发收起逻辑
这是最稳妥、兼容性最好的方式，完全复用 Bootstrap 内置的 Collapse 实例管理机制。
- 必须等 DOM 加载完成后再获取 Collapse 实例，否则
bootstrap.Collapse.getInstance()返回null - 只对已展开的折叠容器调用
hide()，避免在桌面端误操作 - 推荐选择器为
#navbarResponsive（或你实际的id），不要用 class 名匹配多个元素 - 示例代码：
document.addEventListener('DOMContentLoaded', () => {
const navbarCollapse = document.getElementById('navbarResponsive');
if (!navbarCollapse) return;
<p>const collapseInstance = bootstrap.Collapse.getInstance(navbarCollapse);</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/gongju/2501" title="Bootstrap"><img
src="https://img.php.cn/upload/manual/001/431/639/6a6713f6cfa4e217.png" alt="Bootstrap" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/gongju/2501" title="Bootstrap" class="overflowclass">Bootstrap</a>
<p class="overflowclass">Bootstrap 5.3.8 编译版包含可直接用于项目的 CSS、JavaScript 和插件文件，适合快速搭建响应式网页。</p>
</div>
<a rel="nofollow" href="/xiazai/gongju/2501" title="Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div><p>document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', () => {
if (collapseInstance && collapseInstance._isShown) {
collapseInstance.hide();
}
});
});
});
</p>
用 navbar-toggler.click() 模拟用户点击
这个方法更轻量，适合不想引入 Collapse 实例依赖的场景，但前提是你的 .navbar-toggler 元素存在且绑定正确。
- 必须判断
navbarCollapse.classList.contains('show')，否则桌面端也会触发无意义点击 - 不能用
querySelector('.navbar-toggler')匹配多个按钮（比如多个导航栏），要确保唯一性 - 如果使用了自定义 data-bs-target，确保
data-bs-target值与navbarCollapse.id一致 - 常见错误：把
.navbar-toggler写成navbar-toggler（漏掉点号），导致querySelector返回null
动态路由（如 SPA）下如何保证新链接也生效
单页应用中，路由切换后新增的 .nav-link 不会被早期的 addEventListener 捕获，必须改用事件委托。
- 监听父容器（如
.navbar-collapse或#navbarResponsive）的冒泡 click 事件 - 用
event.target.matches('.nav-link')判断是否点击了目标链接 - 仍需检查 Collapse 实例状态或
.show类，避免重复 hide - 示例片段：
document.getElementById('navbarResponsive').addEventListener('click', function (e) {
if (e.target.matches('.nav-link')) {
const collapseInstance = bootstrap.Collapse.getInstance(this);
if (collapseInstance && collapseInstance._isShown) {
collapseInstance.hide();
}
}
});
最容易被忽略的是：SPA 中路由跳转可能比 hide() 执行更快，造成视觉残留。建议在 hide() 后加 setTimeout(() => { /* 清理或重置 */ }, 100)，或监听 hidden.bs.collapse 事件再执行跳转逻辑。
