下拉菜单自动收起的核心是利用事件冒泡监听document点击并判断是否点在菜单外部。需绑定document点击事件，用closest('.dropdown')检测目标，按钮点击时stopPropagation，统一收起逻辑，并支持Esc键、focusout及移动端touchstart。
下拉菜单自动收起的核心不是“实现冒泡”，而是利用事件冒泡机制来监听点击事件，判断点击是否发生在菜单外部，从而触发收起逻辑。冒泡本身是浏览器默认行为，无需手动实现，关键在于合理监听和拦截。
监听 document 点击并利用冒泡捕获外部点击
把点击监听器绑定在 document 上，借助事件冒泡：用户点击任意位置，事件会从目标元素逐层向上冒泡到 document。此时检查点击目标是否属于下拉菜单或其触发按钮，如果不是，就收起菜单。
- 给下拉菜单容器（如
.dropdown-menu）和触发按钮（如.dropdown-toggle）加统一 class 或 data 属性，方便识别 - 在 document 点击回调中，用
event.target判断点击位置 - 使用
closest()方法高效检测目标是否在菜单或按钮内：!event.target.closest('.dropdown')
避免重复收起与误触发
如果菜单收起逻辑写在多个地方（比如按钮点击同时收起、document 点击也收起），容易重复执行或冲突。推荐统一收起入口，并注意：
- 按钮点击时调用
event.stopPropagation()，防止点击按钮后事件继续冒泡到 document 导致立刻又收起 - 收起前加状态判断，比如只在菜单当前展开时才执行隐藏操作
- 用
classList.toggle('show')或直接操作style.display时，确保 DOM 更新同步
兼容性与边界情况处理
移动端点击穿透、focus 失去、键盘操作（如 Esc）也应纳入考虑，让交互更健壮：
Java注释规范Skills
下载
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
立即学习“Java免费学习笔记（深入）”；
- 按下
Escape键时收起菜单：document.addEventListener('keydown', e => e.key === 'Escape' && closeDropdown()) - 菜单获得焦点后，移出焦点时（blur）不直接收起，因为 blur 可能由内部元素切换引起；更适合配合 focusout +
relatedTarget判断是否移出整个 dropdown 区域 - 移动端 touchstart 事件替代 click（部分 iOS 有延迟），或同时监听两者
一个精简可复用的示例结构
HTML 中保持语义清晰：
<div class="dropdown">
<button class="dropdown-toggle">菜单</button>
<ul class="dropdown-menu">
<li><a href="#">选项1</a></li>
<li><a href="#">选项2</a></li>
</ul>
</div>
JS 中统一管理：
- 点击按钮 → 切换菜单显示状态，并
stopPropagation - document 点击 → 检查是否点在
.dropdown外，是则收起 - Esc 键 → 收起所有打开的下拉菜单
