bootstrap 5 导航栏点击链接后不自动收起是默认行为，非 bug；需为 .nav-link 显式添加 data-bs-toggle="collapse" 和 data-bs-target=".navbar-collapse.show" 才能触发 collapse 插件收起逻辑。
点击导航链接后菜单不收起，不是 bug，是 bootstrap 5 的默认行为——它压根没设计「跳转即收起」逻辑。必须显式告诉 collapse 插件：这个链接也要触发收起。
为什么 .nav-link 点击不收起菜单
Bootstrap 5 的 .navbar-collapse 完全依赖 Collapse 插件控制显隐，而该插件只响应带 data-bs-toggle="collapse" 的元素点击。默认只有 .navbar-toggler 有这个属性，.nav-link 只负责跳转或滚动，不参与状态切换。
- 这不是 CSS 问题：硬加
display: none或移除show类会破坏aria-expanded、过渡动画和后续展开能力 - 也不是 JS 报错：控制台通常无错误，纯属逻辑缺失
- 锚点链接（如
href="#contact"）同样失效，因为 Collapse 不监听 hash 变化
纯 HTML 方案：给 .nav-link 加 data-bs-toggle
这是最轻量、最可靠的方式，无需 JS，兼容所有 Bootstrap 5 场景。
- 每个可点击的导航项（包括下拉里的
.dropdown-item）都要加：data-bs-toggle="collapse"和data-bs-target=".navbar-collapse.show" - 必须用
.navbar-collapse.show，不能写成.navbar-collapse或#navbarNav——前者匹配所有折叠区（含隐藏的），后者在多导航栏时易冲突 - 保留原有
href，不影响页面跳转或锚点滚动 - 示例：
@#@#@#@#@#@#@#@#@#@0
JS 方案：监听 click 并模拟 .navbar-toggler.click()
适合需要拦截跳转、做异步加载，或导航结构动态生成的场景。
- 必须在
DOMContentLoaded后执行，且确保 Bootstrap JS 已加载（推荐放
