Bootstrap 5 导航栏默认小屏下折叠，需确保 collapse 容器无 show 类、navbar-toggler 配置正确；点击链接或外部区域收起需手动 JS 触发 collapse 实例的 click() 或 hide() 方法，禁用 style 或重复初始化。
点击汉堡按钮才展开导航栏（默认隐藏）
Bootstrap 5 导航栏默认在小屏幕下是「折叠但可点击展开」，不是「完全隐藏」。所谓“点击才显示的隐藏导航”，本质是让 .navbar-collapse 初始状态为收起（不显示），且仅响应 .navbar-toggler 的点击——这其实是 Bootstrap 的默认行为，只要没手动加 show 类就对了。
常见错误是给 #navbarNav（或类似 ID 的 collapse 容器）加了 show 类，导致菜单一进页面就展开；或者误用 collapse 类在错误元素上（比如直接加在 <ul> 上，而非包裹它的 <div>）。
- 确保 collapse 容器（如
<div class="collapse navbar-collapse" id="navbarNav">）**不带show类** -
.navbar-toggler必须有data-bs-toggle="collapse"和正确匹配的data-bs-target="#navbarNav" - 不要在 collapse 容器上写
style="display: block"或 JS 直接设element.style.display——这会绕过 Bootstrap 状态管理，后续click()失效 - 如果用了自定义 JS 初始化 Collapse 实例，请确认没调用
show()方法
点击导航链接后自动收起（移动端关键体验）
用户点完 .nav-link 后菜单还开着，是移动端最典型的体验断层。Bootstrap 不会自动监听内部链接点击来收起，必须手动干预。
最安全的做法不是操作 DOM 样式，而是触发原生收起逻辑：
- 监听所有
.nav-link的click事件 - 先判断
document.getElementById('navbarNav')?.classList.contains('show')，避免桌面端误触发 - 只在满足条件时调用
document.querySelector('.navbar-toggler').click()—— 这等价于用户点了一次汉堡图标，能同步aria-expanded、CSS 类和过渡动画 - 这段 JS **必须放在 Bootstrap JS 加载之后**，推荐塞在
</body>前，或用DOMContentLoaded包裹
点击导航栏外部区域自动收起
用户点到导航栏以外的地方（比如正文、空白处），期望菜单收起。这个需求不能靠 data-bs-toggle 配置实现，因为该属性只绑定到显式声明的触发器（如 .navbar-toggler），无法响应动态变化的 .navbar-collapse.show 状态。
必须用 JS 主动检测并调用 Collapse 实例的 hide() 方法：
- 监听
document的click事件 - 用
e.target.closest('.navbar')判断点击是否发生在导航栏范围内，是则跳过 - 否则查
document.querySelector('.navbar-collapse.show')，存在则获取其实例并调用hide() - 注意：要用
bootstrap.Collapse.getInstance(el)?.hide()，而不是new bootstrap.Collapse(el).hide()，后者会重复初始化，可能破坏状态
为什么不用 data-bs-toggle="dropdown" 替代 collapse？
有人想用下拉菜单（dropdown）实现类似效果，但这是错位方案。dropdown 设计目标是浮层式下拉（position: absolute），而导航栏折叠是流式布局内收起，两者语义和行为完全不同。
典型问题包括：
- 子菜单脱离文档流，滚动时错位、被遮挡
- 移动端点击后不自动收起，需额外监听
hide.bs.dropdown并手动处理 - 无法与
.navbar-collapse的响应式断点联动，小屏下仍显示完整菜单 -
dropdown不维护「当前哪个项展开」的状态，做多级菜单时互斥逻辑难控制
真正需要的是 collapse 插件的流式折叠能力，不是 dropdown 的浮层定位能力。别为了少写几行 JS 而牺牲语义正确性和可访问性。
