级联菜单“刚点开就关闭”问题的解决方案是：在下拉按钮点击事件中调用 event.stoppropagation() 阻止冒泡，全局监听器改用 element.contains() 判断点击位置，并统一状态管理延迟收起，同时移除 hover 伪类改用 js 控制显隐。
在级联菜单中，事件冒泡常导致“刚点开就关闭”的问题：点击按钮触发展开，但该点击事件继续向上冒泡到 document 的全局监听器，被误判为“点击外部”，随即执行收起逻辑。关键不是阻止冒泡本身，而是让展开与收起逻辑能正确区分“谁被点了”。
用 event.stopPropagation() 隔离按钮点击
给所有下拉触发按钮（如 .dropdown-btn）的点击事件处理器中，显式调用 stopPropagation()，防止其冒泡干扰全局判断。
- 只对按钮点击加这句，不影响子菜单项内部交互（如点击链接、切换开关）
- 避免在 document 级监听器里做复杂条件判断，逻辑更清晰
- 示例：
btn.addEventListener('click', e => { e.stopPropagation(); toggleDropdown(e.target); });
改用 Element.contains() 判断点击位置
全局点击监听器不再依赖 event.target.matches()，而是检查点击目标是否落在菜单容器或按钮内部：
Java JDK 25
下载
Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。
-
if (!dropdownContainer.contains(e.target) && !triggerBtn.contains(e.target))才执行收起 - 这样即使按钮内有图标、文字等子元素，只要点在按钮区域，就不会误关
- 比匹配 class 名更健壮，不依赖 DOM 结构细节
统一状态管理，延迟收起判定
把“是否应关闭”判断从即时响应改为状态驱动：
- 点击按钮时，先标记当前菜单为“活跃中”，并记录其 DOM 引用
- 全局监听器中，只收起“非当前活跃”的菜单，而不是无差别清空
- 可配合
setTimeout延迟 0ms 执行收起，确保按钮点击逻辑已完整走完
避免 hover + click 混用导致的冲突
纯 CSS 的 :hover 在触摸设备上不可靠，且与 JavaScript 点击逻辑容易打架：
- 移除
.has-submenu:hover .submenu这类规则，全部交由 JS 控制显隐 - 用
classList.toggle('active')替代style.display，便于 CSS 过渡和媒体查询协同 - 确保移动端点击不会因伪类残留引发意外展开/收起
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
