小屏幕下嵌套菜单点击无响应问题求助

问题分析 #

当前代码在移动端仅能触发一级下拉菜单，二级菜单点击无反应，核心原因：

1. 依赖:hover伪类控制菜单显示，移动端无鼠标hover状态，点击触发逻辑不完整
2. 事件监听仅绑定了顶级菜单，未覆盖二级菜单的触发元素
3. 未处理事件冒泡，点击二级菜单时可能触发父菜单的折叠逻辑

修复方案 #

1. CSS 调整（适配移动端点击交互）

将:hover触发改为通过.active类控制菜单显示，同时保留大屏端hover逻辑：

/* 大屏端保留hover效果 */
@media (min-width: 769px) {
  .dropdown:hover .dropdown-menu {
    display: block;
  }
  .dropdown-submenu:hover .dropdown-menu {
    display: block;
  }
}

/* 移动端仅通过active类控制显示 */
@media (max-width: 768px) {
  .dropdown-menu, .dropdown-submenu .dropdown-menu {
    display: none;
  }
  .dropdown.active .dropdown-menu,
  .dropdown-submenu.active .dropdown-menu {
    display: block;
  }
}

2. JavaScript 逻辑完善（绑定所有层级菜单的点击事件）

给所有包含子菜单的触发元素绑定点击事件，切换active类并阻止事件冒泡：

// 获取所有带下拉菜单的触发元素（一级和二级）
const dropdownToggles = document.querySelectorAll('.dropdown-toggle, .dropdown-submenu > a');

dropdownToggles.forEach(toggle => {
  toggle.addEventListener('click', function(e) {
    // 阻止事件冒泡，避免父菜单的点击事件被触发
    e.stopPropagation();
    // 切换当前菜单的active状态
    const parent = this.closest('.dropdown, .dropdown-submenu');
    parent.classList.toggle('active');
    
    // 关闭其他同级菜单（可选优化）
    const siblings = Array.from(parent.parentElement.children).filter(item => item !== parent);
    siblings.forEach(sibling => sibling.classList.remove('active'));
  });
});

// 点击页面空白处关闭所有菜单（可选优化）
document.addEventListener('click', function() {
  document.querySelectorAll('.dropdown.active, .dropdown-submenu.active').forEach(menu => {
    menu.classList.remove('active');
  });
});

3. HTML 结构确认

确保二级菜单的父元素带有dropdown-submenu类，触发元素结构正确：

<li class="dropdown">
  <a href="#" class="dropdown-toggle">Apple</a>
  <ul class="dropdown-menu">
    <li class="dropdown-submenu">
      <a href="#">Red Apple</a>
      <ul class="dropdown-menu">
        <li><a href="#">Tasty</a></li>
        <li><a href="#">Sweet</a></li>
      </ul>
    </li>
    <li class="dropdown-submenu">
      <a href="#">Green Apple</a>
      <ul class="dropdown-menu">
        <li><a href="#">Sour</a></li>
      </ul>
    </li>
  </ul>
</li>

关键说明 #

• 用.active类替代:hover，完全适配移动端点击触发逻辑
• 事件监听覆盖所有层级触发元素，确保二级菜单能正常触发三级菜单
• stopPropagation()阻止事件冒泡，避免点击子菜单时父菜单意外折叠
• 空白处关闭逻辑可提升整体用户体验

内容的提问来源于stack exchange，提问作者Brudderway