bootstrap 5 导航栏点击链接后不收起，因 collapse 默认不监听内部链接点击；需在 dom 加载后获取实例并为 nav-link 添加 click 事件手动调用 hide()。
移动端点击导航项后下拉菜单不收起
Bootstrap 5 默认行为是：点击 navbar-toggler 展开/收起导航栏，但点击其中某个 <a></a> 链接（比如跳转到 /about）时，导航栏仍保持展开状态——尤其在单页应用或纯 HTML 页面中，这会遮挡内容，体验很差。
根本原因在于 Bootstrap 的 collapse 组件不会自动监听内部链接的点击事件并触发隐藏逻辑；它只响应 data-bs-toggle="collapse" 元素或手动调用 hide()。
- 最直接的修复是在每个导航链接上加
data-bs-toggle="collapse"和对应目标（如data-bs-target="#navbarNav"），但这样会让链接同时触发跳转和折叠，可能造成两次事件冲突 - 更稳妥的做法是监听导航项点击，手动调用
bootstrap.Collapse.getInstance()的hide()方法 - 注意：必须等 DOM 加载完成后再初始化，否则
getInstance()返回null
document.addEventListener('DOMContentLoaded', () => {
const navbarCollapse = document.getElementById('navbarNav');
if (navbarCollapse) {
const collapse = bootstrap.Collapse.getInstance(navbarCollapse);
document.querySelectorAll('#navbarNav a.nav-link').forEach(link => {
link.addEventListener('click', () => {
if (collapse && collapse._isShown) collapse.hide();
});
});
}
});
使用 data-bs-toggle="collapse" 时跳转失效或页面刷新
如果给导航链接同时加上 href="/contact" 和 data-bs-toggle="collapse"，部分浏览器（尤其是 Safari 移动端）会因事件冒泡或默认行为未被阻止，导致跳转失败、页面白屏或意外刷新。
关键点在于：Bootstrap 的 data-bs-toggle 本身不干预链接的默认跳转行为，它只是控制折叠；而折叠动画是异步的，若跳转立即发生，折叠过程会被中断。
- 不要给
<a></a>同时设data-bs-toggle和href—— 这是常见误用 - 保留
href，用 JS 手动控制折叠（如上一节），并在click中不做preventDefault()，确保自然跳转 - 如果是 SPA（如 Vue/React），用路由编程式导航（
router.push()或history.pushState()），再调用collapse.hide()
折叠状态在页面跳转后未重置
用户从首页点击导航进入 /products 页面，此时导航栏处于展开态；但新页面加载后，#navbarNav 默认是收起的——可视觉上却“卡”在展开状态，尤其当新页面也用了相同 navbar 结构但未初始化 collapse 实例时。
这是因为 Bootstrap 的 collapse 状态不跨页面持久化，且新页面 JS 可能没执行初始化，DOM 中残留 show 类但无实例控制。
- 检查新页面是否引入了 Bootstrap JS 并正确执行；缺失则
collapse完全不工作 - 确保新页面的 navbar
<div> 没有残留 <code>class="show"（服务端渲染或静态生成时容易带入） - 可在新页面
DOMContentLoaded里强制重置：document.querySelectorAll('.navbar-collapse.show').forEach(el => el.classList.remove('show')) - Vue：在
onMounted或nextTick后获取元素并初始化 collapse 实例 - React：在
useEffect(() => { ... }, [])中操作，并用ref精确指向navbar-collapse元素 - 避免在 SSR 渲染阶段调用
bootstrap.Collapse（Node.js 环境无window） - 推荐封装一个
useNavbarCollapseHook 或 composable，统一处理收起逻辑
Vue/React 中动态 navbar 的折叠逻辑失效
在组件化框架中，navbar 常作为独立组件复用，但 bootstrap.Collapse 实例依赖真实 DOM 节点。若 navbar 在组件挂载时 DOM 尚未就绪（比如用 v-if 控制显示、或 React useEffect 时机不对），getInstance() 就拿不到有效引用。
hide()，控制台不会报错，但行为静默失效——这种问题在组件切换频繁的 SPA 里极难定位。
