如何在小屏幕设备上正确实现多级嵌套下拉菜单的点击展开功能-html教程-PHP中文网

如何在小屏幕设备上正确实现多级嵌套下拉菜单的点击展开功能

本文详解为何小屏幕下二级及更深嵌套菜单（如“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”所在的

<!-- 修改 HTML：为所有可展开的菜单项（含嵌套）添加 data-toggle -->

// 替换原有 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);
}