触屏设备二级菜单无法展开的根本原因是hover失效且事件绑定错误：移动端无悬停概念，js若仅依赖类名如.submenu而忽略.nested-menu等深层结构，或未阻止事件冒泡、未设position:relative定位上下文、缺乏可访问性属性，均会导致菜单失效。
触屏设备上点击无法展开二级菜单，根本原因是 hover 失效且事件没绑对
桌面端靠 :hover 触发子菜单显示，但手机和平板没有“悬停”概念，:hover 在多数触屏浏览器中只在模拟鼠标时短暂触发（比如 Safari 某些版本点一下会闪现），不能依赖。更关键的是：很多教程只给顶层 .menu-item 绑了点击事件，又只查 .submenu，遇到嵌套的 .nested-menu 就直接跳过——所以点“Red Apple”没反应，“Tasty”永远出不来。
- 检查你 JS 里是否写了类似
menuItem.querySelector(".submenu")——如果深层菜单用的是.nested-menu或其他类名，这行就返回null - 确保所有可展开项（无论几级）都带统一识别标记，比如
data-toggle="dropdown"，而不是靠类名硬匹配 - 别在
click里用display: block/none切换，优先用classList.toggle("show")配合 CSS 过渡，避免内联样式污染和动画卡顿
HTML 结构必须支持递归遍历，不能靠 class 名深度编码
写死 .submenu 和 .nested-menu 两层类名，等于把菜单层级锁死在两层。真实业务里常有“产品 → 硬件 → 传感器 → 温度模块”这种四级结构。结构上要允许任意深度，靠 DOM 关系而非类名区分层级。
- 每个含子菜单的
<li>必须显式加class="has-submenu"或data-has-submenu，不要靠后代选择器猜 - 子菜单统一用
<ul class="dropdown-menu"></ul>，不区分 “submenu”“nested-menu”，CSS 里用.has-submenu > .dropdown-menu控制定位 -
<nav aria-label="main navigation"></nav>包裹整个菜单，每个可展开项加aria-haspopup="true"，展开后加aria-expanded="true"
JavaScript 必须阻止事件冒泡，否则点二级项会意外收起一级
这是最常被忽略的交互陷阱：点击“Tasty”时，事件会从 <li> 冒泡到父级 <li class="has-submenu">，触发它的收起逻辑，结果刚点开就关了。不是 bug，是没处理事件流。
- 所有点击事件监听里第一句必须是
e.stopPropagation() - 不要用
document.addEventListener("click", ...)全局监听来收起菜单——它和逐级点击冲突，改用 focusout + tabindex 配合更稳 - 移动端还要监听
touchstart替代click（iOS 上 click 有 300ms 延迟），或直接用pointerdown兼容两者
CSS 定位失效导致子菜单飞到页面顶部或偏移，90% 是父元素没设 position: relative
子菜单用 position: absolute 时，浏览器会找最近的 position: relative/absolute/fixed 祖先作为定位上下文。如果没找到，就相对于 定位——于是所有下拉都堆在左上角。
- 每个带子菜单的
<li class="has-submenu">必须有position: relative - 避免在父容器上用
transform、opacity 或 <code>filter，它们会创建新的 stacking context，导致z-index失效、子菜单被遮挡 - 用
top: 100%而不是top: 0让子菜单紧贴父项底部；横向用left: 0对齐，需要右对齐时改用right: 0，别用left: calc(100% - width)
真正难的不是写出来，而是让“点开 → 点子项 → 不收起 → 键盘能进 → 屏幕阅读器能读 → 小屏不重叠 → 大屏 hover 也不冲突”这一整条链路全通。结构语义、事件粒度、定位上下文、可访问性属性，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
