Bootstrap默认不收起折叠菜单，因其Collapse插件为受控组件，仅响应data-bs-toggle显式触发；需手动监听document点击并调用hide()方法，排除.navbar内点击，确保ARIA与动画同步。
点击导航栏外部区域时，折叠菜单（汉堡菜单）不自动收起，是 Bootstrap 默认行为——它只响应 .navbar-toggler 点击，不监听 document 级别的点击事件。要实现「点外面就收起」，必须手动监听并调用 Collapse 的 hide 方法，不能靠 CSS 或简单样式控制。
为什么默认不收起？
Bootstrap 5 的 Collapse 插件设计上是“受控组件”：只对明确声明 data-bs-toggle="collapse" 的元素响应，且不主动监听 click 事件冒泡到 document。这是为了防止误触发（比如点页面内其他链接、按钮时意外关闭菜单），但代价是移动端体验断层——用户点完链接或空白处，菜单还挡着内容。
常见错误现象包括：
- 点导航链接后菜单仍展开，遮挡锚点内容
- 点
.navbar-collapse外的任意空白区域，菜单无反应 - 手动加
display: none导致后续无法再打开（.show类和aria-expanded不同步）
用 bootstrap.Collapse.getInstance() 安全收起
推荐做法是获取当前展开的 Collapse 实例，调用其 hide() 方法。这能保证状态、ARIA 属性、过渡动画全部正常，且兼容动态插入的 DOM。
实操建议：
- 只在
.navbar-collapse.show存在时执行，避免空实例报错 - 监听
document的click，但排除.navbar内部点击（否则点菜单项也会收起） - 使用
event.target.closest()判断是否点在 navbar 区域内
示例代码：
document.addEventListener('click', function (e) {
const navbarCollapse = document.querySelector('.navbar-collapse.show');
if (!navbarCollapse || e.target.closest('.navbar')) return;
bootstrap.Collapse.getInstance(navbarCollapse)?.hide();
});
data-bs-toggle="collapse" + data-bs-target 不适用于外部点击
data-bs-toggle 属性方案只对**显式绑定的触发元素**有效（如 .navbar-toggler 或带该属性的 <a>）。你不能给 document 加 data-bs-toggle，也不能用 data-bs-target 指向一个动态变化的选择器（如 ".navbar-collapse.show"）来响应外部点击——它只在元素初始化时解析一次，不会随 DOM 状态更新。
所以这类需求必须走 JS 主动调用，而不是声明式配置。
移动端触摸与 focus 冲突需注意
在 iOS 和部分安卓浏览器中，点击空白处可能触发 focusout 而非 click，尤其当焦点在输入框或可聚焦元素上时。如果只监听 click，会出现「点外面没反应」的情况。
更健壮的做法是补充监听 blur 事件，并结合 setTimeout 防抖判断是否真要收起：
- 监听
document的click和所有可聚焦元素的blur - blur 后延时 100ms 检查
document.activeElement是否已移出 navbar - 避免在点击
.navbar-toggler时误触发收起（它本身就要展开）
真正容易被忽略的是：这个逻辑必须在 DOMContentLoaded 后执行，且不能和 Bootstrap 的初始化顺序冲突——如果 navbar 是动态加载的，还得等它挂载完成再绑定事件。
