如何用原生 JavaScript 实现移动端导航菜单的父子联动展开与互斥收起-html教程-PHP中文网

如何用原生 JavaScript 实现移动端导航菜单的父子联动展开与互斥收起

本文详解如何使用纯 JavaScript 实现移动导航中点击父级菜单项时，精准查找并切换其子菜单（.sub-menu）的 active 类，同时自动关闭其他已展开的子菜单，确保单次仅一个下拉面板处于激活状态。

本文详解如何使用纯 javascript 实现移动导航中点击父级菜单项时，精准查找并切换其子菜单（`.sub-menu`）的 `active` 类，同时自动关闭其他已展开的子菜单，确保单次仅一个下拉面板处于激活状态。

在构建响应式移动端导航时，常见的交互需求是：点击带子菜单的父 <li> 项时，仅展开其直属 .sub-menu，且需保证“互斥展开”——即新展开一个子菜单时，自动收起其他所有已激活的子菜单。这无需依赖 jQuery 或框架，纯 Vanilla JS 即可优雅实现。

✅ 正确的选择器与结构前提

首先需确保 HTML 结构清晰、语义合理：

父菜单项必须为 <li>，且其直接子元素包含 <ul class="sub-menu"></ul>；
为避免点击后页面跳转干扰交互，父级 <a></a> 的 href 应设为 "#"（而非真实 URL），这是关键前提；
CSS 中通过 .sub-menu.active { display: block; opacity: 1; } 控制显隐，初始状态应为 display: none。

<div id="menu-mobile">
  <div class="main-wrap">
    <ul id="menu-mobile-menu">
<li>
        <a href="#">产品服务</a>
        <ul class="sub-menu">
<li><a href="/web-design">网页设计</a></li>
          <li><a href="/app-dev">应用开发</a></li>
        </ul>
</li>
      <li>
        <a href="#">关于我们</a>
        <ul class="sub-menu">
<li><a href="/team">团队介绍</a></li>
          <li><a href="/contact">联系我们</a></li>
        </ul>
</li>
    </ul>
</div>
</div>

✅ 核心 JavaScript 实现（含互斥逻辑）

以下代码完成三项核心任务：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

为每个顶级 <li> 绑定点击事件；
关闭所有其他已激活的 .sub-menu（非当前项的子菜单）；
切换当前 <li> 下 .sub-menu 的 active 类。

document.querySelectorAll('#menu-mobile .main-wrap > ul > li').forEach(parentLi => {
  parentLi.addEventListener('click', function (e) {
    // 1. 关闭所有其他已激活的 sub-menu（排除当前项的子菜单）
    document.querySelectorAll('#menu-mobile .sub-menu.active').forEach(activeSub => {
      if (activeSub !== this.querySelector('.sub-menu')) {
        activeSub.classList.remove('active');
      }
    });

    // 2. 切换当前父项下的子菜单
    const subMenu = this.querySelector('.sub-menu');
    if (subMenu) {
      subMenu.classList.toggle('active');
    }
  });
});

? 为什么用 > 限定层级？
#menu-mobile .main-wrap > ul > li 确保只选取 .main-wrap 直接子 <ul></ul> 下的 <li>，避免误选嵌套多层的子菜单项（如二级子项），提升选择器精确性与性能。

⚠️ 注意事项与最佳实践

避免 ev.preventDefault() 的滥用：仅当 <a></a> 需要阻止默认跳转行为时才调用。本例中因 href="#" 已无跳转副作用，可省略 preventDefault()；若保留 href="https://..."，则必须添加，否则页面会刷新或跳转。
DOM 加载时机：建议将脚本置于

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南