bootstrap dropdown 默认点击外部不关闭，需显式启用autoclose: 'outside'；其生效依赖dom就绪、js初始化、静态html结构及正确z-index和pointer-events设置。
默认情况下，Bootstrap 的 Dropdown 组件在点击外部区域时**不会自动关闭**——这是常见误解。它只在点击 toggle 按钮或按 Esc 键时关闭，autoClose: 'outside' 不是默认行为，必须显式启用。
为什么 data-bs-auto-close="outside" 有时不生效
HTML 属性 data-bs-auto-close="outside" 看似简单，但实际依赖两个前提：
- DOM 已就绪，且 Bootstrap JS 已完成初始化（不能在
<script></script>标签里直接写属性就完事） - 下拉容器（
.dropdown）必须是静态 HTML，**不能是后续用 JS 动态插入的节点**——否则 Bootstrap 初始化阶段根本没扫描到它 - 若页面用了
data-bs-toggle="dropdown"但没引入 Bootstrap 的 JS 文件，该属性完全被忽略（仅 CSS 生效）
正确初始化 autoClose: 'outside' 的 JavaScript 写法
最可靠的方式是手动调用 bootstrap.Dropdown 构造函数，并传入配置项。尤其适合动态渲染、单页应用或复杂布局场景：
document.addEventListener('DOMContentLoaded', () => {
const dropdowns = document.querySelectorAll('.dropdown');
dropdowns.forEach(el => {
new bootstrap.Dropdown(el, { autoClose: 'outside' });
});
});
注意点：
- 不要重复初始化：如果某个
.dropdown已被 Bootstrap 自动初始化过（比如用了data-bs-toggle），再 new 一次会报错"Dropdown is already initialized" - 精准控制：如只需某一个菜单支持外部关闭，改用
document.getElementById('myDropdown')替代querySelectorAll，避免干扰其他下拉组件 - 确保
bootstrap全局对象存在——如果你用的是 ES 模块导入，需先import * as bootstrap from 'bootstrap'
移动端点击外部不关闭？先查这三处 CSS
iOS Safari 和部分安卓 WebView 中，“外部点击”失效往往不是 JS 问题，而是样式遮挡或层叠上下文异常：
-
pointer-events: none被误加在body、.modal-backdrop或某个父容器上，导致点击事件穿透失败 -
.dropdown-menu的z-index过低（比如只有 100），被header（z-index: 1000）或 toast 提示盖住，点击“视觉空白区”实际落在了 header 上，触发不了 document 级 click 监听 - 父元素用了
transform、will-change或opacity ，意外创建了新的 stacking context，使 <code>.dropdown-menu和 document 的事件捕获路径断开
验证方法：打开 DevTools → 用元素选择器（Ctrl+Shift+C）点页面任意空白处，看高亮框是否真落在 或预期区域；若高亮的是某个 div.overlay，就得调整它的 pointer-events 或移除干扰样式。
千万别在 .dropdown-menu 里用 stopPropagation()
很多教程教你在菜单内部加 e.stopPropagation() 来防止点击后立即关闭——这确实能“留住菜单”，但会彻底破坏 autoClose: 'outside' 的底层机制：
- Bootstrap 的外部关闭逻辑靠监听
document上的全局click事件，靠事件冒泡触发 - 一旦你在
.dropdown-menu内部任何元素上调用stopPropagation()，该次点击就再也传不到document，autoClose 失效且无法恢复 - 正确替代方案：只对需要交互的子元素（如复选框、按钮）调用
e.stopPropagation()，但确保其父级.dropdown-menu本身不阻止冒泡
真正难搞的不是怎么关，而是关得准——外部点击识别依赖 DOM 结构、CSS 层叠和事件流三者协同，漏掉任意一环都可能让菜单“卡住”。
