点击导航链接后菜单不收起，是因为.nav-link未触发Collapse状态切换；需通过data-bs-toggle="collapse"和data-bs-target=".navbar-collapse.show"实现纯HTML方案，或用JS模拟.navbar-toggler点击来正确收起。
点击导航链接后菜单不收起，是因为没触发 Collapse 的状态切换
Bootstrap 5 的 .navbar-collapse 是靠 Collapse 插件控制显隐的，而 Collapse 的状态由 data-bs-toggle="collapse" 和 data-bs-target 驱动。默认情况下，.nav-link 只负责跳转或滚动，不会调用 Collapse 的 hide 方法——所以菜单卡在展开态，遮住内容，用户还得再点一次汉堡图标。
这不是 CSS 能解决的问题，也不是加个 display: none 就行。硬设样式会破坏 show 类、aria-expanded 属性和过渡动画，后续点击-toggler 就会失效。
- 必须通过 Collapse 插件的原生逻辑收起，才能保持状态同步
- 推荐优先用纯 HTML 方案（无 JS），它更轻量、兼容性更好
- 若需支持锚点滚动或自定义跳转逻辑，才引入 JS 控制
纯 HTML 方案：给每个 .nav-link 加 data-bs-toggle="collapse"
这是 Bootstrap 5 官方支持的无 JS 解法，原理是让链接本身成为 Collapse 的触发器之一。
只需确保 data-bs-target 精准匹配当前展开的折叠容器：
立即学习“前端免费学习笔记（深入）”；
- 写成
data-bs-target=".navbar-collapse.show"，而不是#navbarNav—— 这样只对「正在展开」的容器生效，桌面端不会误触 - 所有可点击的导航项（包括下拉项里的
.dropdown-item）都要加这组属性 - 保留原有
href或data-bs-toggle="tab"等行为，不影响跳转或锚点定位
示例：
<a class="nav-link" href="#about" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">关于我们</a>
JS 方案：监听点击并模拟-toggler 点击
当需要更精细控制（比如阻止默认跳转、做异步加载、或兼容旧版 NavWalker）时，用 JS 更灵活。关键不是手动操作 DOM，而是复现用户点击行为。
- 用
document.querySelectorAll('.nav-link, .dropdown-item')选中全部可交互项 - 检查
.navbar-collapse.show是否存在，避免桌面端误执行 - 调用
navbarToggler.click()，而非myCollapse.hide()—— 前者会触发完整生命周期（hide.bs.collapse→ 过渡 →hidden.bs.collapse），后者可能跳过事件钩子 - 脚本必须放在
bootstrap.bundle.min.js加载之后，建议用DOMContentLoaded包裹
常见错误：
-
document.querySelector('.navbar-toggler')返回 null：检查是否漏了.navbar-toggler元素，或脚本执行太早 - 收起后无法再展开：大概率是用了
element.classList.remove('show')这类直接操作，绕过了 Collapse 实例
收不起的底层原因：data-bs-* 属性写错或缺失
如果连点击-toggler 都没反应，那自动收起就是无从谈起。90% 的“收不起”问题，根源在基础结构失效。
-
data-bs-toggle="collapse"写成data-toggle="collapse"：Bootstrap 5 不识别，完全不绑定事件 -
data-bs-target="#navbarNav"指向的 ID 和<div class="collapse" id="navbarNav"> 不一致（大小写、拼写、空格）<li>没引入 <code>bootstrap.bundle.min.js（含 Popper），或引入顺序错（CSS 必须在 JS 前） - 自定义 CSS 覆盖了
.navbar-collapse的height或overflow，导致 Collapse 插件计算高度失败
查问题先看浏览器控制台有没有 Uncaught Error: Cannot find collapse element 这类报错，再检查元素上是否有 data-bs- 属性被渲染出来。
真正容易被忽略的是：即使 HTML 结构全对，如果页面里混用了 Bootstrap 4 的 JS 初始化代码（比如 $('[data-toggle="collapse"]').collapse()），也会干扰原生行为。Bootstrap 5 不依赖 jQuery，这类代码要彻底删掉。
