本文详解为何小屏幕下二级及更深嵌套菜单（如“Red Apple → Tasty”）无法响应点击，核心在于 JavaScript 事件监听未覆盖 .nested-menu 元素，且 CSS 类名与 JS 选择器不匹配；通过分层事件委托与结构化 DOM 遍历可彻底解决。
本文详解为何小屏幕下二级及更深嵌套菜单（如“red apple → tasty”）无法响应点击，核心在于 javascript 事件监听未覆盖 `.nested-menu` 元素，且 css 类名与 js 选择器不匹配；通过分层事件委托与结构化 dom 遍历可彻底解决。
在响应式导航菜单中，桌面端常依赖 :hover 实现多级展开，而移动端需切换为显式点击触发。原代码的问题本质是：JavaScript 仅对顶层 .menu-item 绑定点击事件，并只查找 .submenu（即一级下拉），却完全忽略了 .nested-menu（二级及更深菜单）——导致点击“Red Apple”后，“Tasty”所在的 <ul class="nested-menu"> 永远不会被 JS 控制显示/隐藏。
✅ 正确解法：分层事件监听 + 精准元素定位
我们不应强行复用 .submenu 类名污染语义（这会破坏 CSS 的 hover 逻辑），而应为不同层级的可展开项统一添加可识别标记（如 data-toggle="dropdown"），再通过事件委托精准控制其子菜单：
<!-- 修改 HTML：为所有可展开的菜单项（含嵌套）添加 data-toggle -->
<li class="menu-item" data-toggle="dropdown">
<a href="#">Apple</a>
<ul class="submenu">
<li class="menu-item" data-toggle="dropdown">
<a href="#">Red Apple</a>
<ul class="nested-menu">
<li><a href="#">Tasty</a></li>
</ul>
</li>
<!-- 其他项同理 -->
</ul>
</li>// 替换原有 JS：使用事件委托，支持任意深度嵌套
document.addEventListener('click', function (e) {
if (window.innerWidth > 768) return; // 仅作用于小屏
const toggleItem = e.target.closest('[data-toggle="dropdown"]');
if (!toggleItem) return;
e.stopPropagation();
// 查找直接子级菜单（兼容 .submenu 和 .nested-menu）
const submenu = toggleItem.querySelector('.submenu, .nested-menu');
if (submenu) {
submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
}
});
// 点击外部区域关闭所有菜单（优化版：排除菜单内部点击）
document.addEventListener('click', function (e) {
if (window.innerWidth > 768) return;
const isInsideMenu = e.target.closest('.main-menu');
if (!isInsideMenu) {
document.querySelectorAll('.submenu, .nested-menu').forEach(el => {
el.style.display = 'none';
});
}
});⚠️ 关键注意事项
- 避免 event.stopPropagation() 过度使用：原代码在顶层 .menu-item 上阻止冒泡，导致嵌套项的点击事件根本无法被捕获。新方案改用 e.target.closest() 主动捕获目标，更健壮。
- CSS 层级需明确：.nested-menu 必须设置 position: absolute; left: 100%; top: 0; 以横向展开，且确保父级 .menu-item 有 position: relative（已存在）。
-
移动端体验增强：建议为小屏菜单添加 touchstart 事件监听（防 iOS 点击延迟），或直接使用 pointerdown：
// 替换 click 为 pointerdown 提升响应速度 document.addEventListener('pointerdown', function(e) { /* ... */ }); -
无障碍友好：为可展开项添加 aria-expanded 属性，并动态更新：
if (submenu) { const expanded = submenu.style.display === 'block'; toggleItem.setAttribute('aria-expanded', expanded); submenu.setAttribute('aria-hidden', !expanded); }
✅ 最终效果验证
- 小屏下点击 “Apple” → 显示 “Red Apple / Green Apple”（一级 .submenu）
- 再点击 “Red Apple” → 显示 “Tasty”（二级 .nested-menu）
- 点击任意空白处 → 所有菜单收起
- 大屏下仍保持 :hover 交互，完全兼容
此方案不修改现有 CSS 结构，不破坏桌面端行为，且具备良好扩展性——新增三级菜单只需同样添加 data-toggle="dropdown" 即可自动支持。
