Bootstrap 5 导航栏点击链接后汉堡菜单不自动收起，因默认无「跳转即收起」逻辑；需为每个.nav-link添加data-bs-toggle="collapse"和data-bs-target=".navbar-collapse.show"以精准触发收起。
移动端点击导航链接后，汉堡菜单不自动收起，是 bootstrap 5 响应式导航栏最常被忽略的交互缺陷——它不是 js 报错，也不是样式失效，而是默认行为本就不包含「跳转即收起」逻辑。
data-bs-toggle="collapse" 必须加在 .nav-link 上
Bootstrap 5 的 Collapse 插件只监听带 data-bs-toggle="collapse" 属性的元素点击事件，而默认这个属性只写在 .navbar-toggler 上。导航链接（.nav-link）本身不触发收起，除非你显式声明。
- 直接给每个
.nav-link添加data-bs-toggle="collapse"和data-bs-target=".navbar-collapse.show" -
.navbar-collapse.show是关键：用类选择器而非 ID，确保只作用于当前已展开的折叠区（避免误关其他 collapse 组件） - 如果用了多个
.navbar-collapse（比如侧边栏+顶部栏），需改用唯一 ID，如data-bs-target="#mainNav"，并确保目标元素有对应id="mainNav"
为什么不能用 navbarToggler.click() 模拟点击
手动调用 navbarToggler.click() 看似合理，但实际容易出问题：
- 在桌面端（
.navbar-collapse始终不带show类），该调用会强制触发一次无意义的展开/收起切换，破坏原有状态 - 若页面内有多个
.navbar-toggler（比如双导航栏），querySelector('.navbar-toggler')可能选错目标 - 它依赖 DOM 已就绪且 Bootstrap JS 已初始化，但执行时机稍早（如放在
DOMContentLoaded里）仍可能失败 - 不如声明式属性可靠：原生
data-bs-*由 Bootstrap 自动绑定，天然兼容aria-expanded同步、过渡动画和事件钩子
锚点跳转（href="#about"）时菜单仍不收起？检查 target 选择器
锚点链接不会触发页面刷新，但 Collapse 收起逻辑仍需执行。常见失效原因是 data-bs-target 写错了：
- 别写成
data-bs-target=".navbar-collapse"——它匹配所有 collapse 元素，包括未展开的，而 Collapse 插件对隐藏元素不执行收起动作 - 必须用
.navbar-collapse.show，确保只命中当前可见的折叠区 - 如果用了自定义 ID（如
id="navMenu"），target 应为#navMenu，且该元素必须同时有collapse和show类 - 锚点跳转本身不影响收起逻辑，但若链接含
preventDefault()或被 JS 拦截（如平滑滚动库），则data-bs-toggle不会触发——此时应回退到事件监听方案
CSS 覆盖导致收起后菜单仍显示
即使 data-bs-toggle 正确、JS 加载无误，菜单也可能“收起失败”——实际是 CSS 强制设了 display: block，覆盖了 JS 注入的 display: none。
- 检查是否在媒体查询中写了类似
#navbarSupportedContent { display: block; }—— 这是最常见的“假死”原因 - Bootstrap 的 Collapse 依赖 JS 动态控制
style="display: none"，任何在 CSS 中硬设display的规则都会打断这一机制 - 修复方式：删掉所有对
.collapse、#navbarSupportedContent等 ID/类的display声明；布局调整改用flex-direction、visibility或仅在.show类下生效的样式
真正麻烦的从来不是怎么写那两行 data-bs-*，而是当菜单看起来“没反应”时，得一层层排除：JS 是否加载、CSS 是否覆盖、target 是否匹配、ARIA 状态是否错位——这些细节不在报错里，只在行为异常中暴露。
