如何使用 jQuery 实现导航菜单子菜单的正确切换（显示/隐藏）

本文详解如何用 jquery 实现单级下拉菜单的“点击切换”逻辑，确保每次仅展开一个子菜单，并支持点击空白处自动收起，避免多个子菜单同时显示的问题。

在构建响应式水平导航菜单时，常见的交互需求是：点击某个主菜单项（如“Cars +”），展开其对应的子菜单；而当用户点击另一个主菜单项时，已展开的子菜单应自动收起，仅保留当前项的子菜单可见

。原始代码中仅对当前元素调用 toggleClass()，未处理其他已激活子菜单的状态，导致多个 .submenu-is-active 同时存在，视觉上出现重叠或布局错乱。

✅ 正确实现逻辑：排他式切换 + 全局收起

核心思路分为两步：

1. 点击菜单项时：先关闭所有其他子菜单，再切换当前子菜单状态；
2. 点击页面非菜单区域时：统一收起所有子菜单及遮罩层。

以下是优化后的完整 jQuery 代码（含注释说明）：

$(document).ready(function() {
  const $blocks = $(".blocks_ul");       // 缓存所有子菜单元素
  const $background = $(".bg_submenu");  // 缓存背景遮罩层

  // 主菜单项点击事件
  $(".menus_li").on('click', function(e) {
    e.stopPropagation(); // 阻止事件冒泡至 body，避免立即触发收起逻辑
    const $thisBlock = $(".blocks_ul", this); // 获取当前菜单项下的子菜单

    // 关闭其他所有子菜单（排他性）
    $blocks.not($thisBlock).removeClass('submenu-is-active');

    // 切换当前子菜单显隐状态
    $thisBlock.toggleClass('submenu-is-active');

    // 同步控制遮罩层：仅在有子菜单打开时显示
    $background.toggleClass('show', $thisBlock.hasClass('submenu-is-active'));
  });

  // 点击页面任意非菜单区域时收起所有子菜单
  $('body').on('click', function(e) {
    const $target = $(e.target);
    // 判断点击目标是否在 .menus_li 或其内部（包括 、
、
 等）
    if (!$target.hasClass('menus_li') && !$target.closest('.menus_li').length) {
      $blocks.removeClass('submenu-is-active');
      $background.removeClass('show');
    }
  });
});

? 关键细节说明

• e.stopPropagation() 是关键：防止点击 或子菜单内部时，事件冒泡到 body 触发误收起；
• $blocks.not($thisBlock) 精准排除当前元素，高效批量移除其他子菜单的激活类；
• $background.toggleClass('show', condition) 实现遮罩层与子菜单状态强绑定，避免视觉不一致；
• 所有 DOM 查询均提前缓存（$blocks / $background），提升性能，尤其在频繁交互场景下更明显。

⚠️ 注意事项

• 确保子菜单 HTML 结构嵌套在 .menus_li 内部（如示例所示），否则 $(".blocks_ul", this) 将无法正确选取；
• 若后续扩展多级菜单，需调整选择器逻辑并考虑递归关闭策略；
• 在移动端，建议补充 touchstart 事件监听以兼容触摸设备（可与 click 合并为 on('click touchstart', ...)）；
• CSS 中 .blocks_ul.submenu-is-active { display: block; } 是显隐控制的基础，不可遗漏。

通过以上方案，即可实现专业、稳定、用户体验良好的导航子菜单切换效果——点击即开、点击他处即关、绝不残留，真正符合现代 Web 导航交互规范。