jQuery 导航菜单子菜单切换：实现单开模式与点击外部关闭

本文详解如何使用 jquery 实现导航菜单的子菜单「单开模式」（即点击新项时自动收起已展开项），并支持点击菜单外部区域关闭所有子菜单，同时联动半透明背景层的显示/隐藏。

在构建响应式水平导航菜单时，常见的交互需求是：点击某个主菜单项时展开其子菜单，而当用户点击另一个主菜单项时，应自动收起之前展开的子菜单，仅保留当前项的子菜单可见——即「单开（exclusive）」行为。原始代码中仅对当前元素执行 toggleClass()，未处理其他已激活项，导致多个子菜单同时显示，破坏用户体验。

✅ 正确实现逻辑

核心思路分三步：

1. 统一管理所有子菜单：预先缓存所有 .block

   

   s_ul 元素；
2. 点击主菜单项时：先移除其他子菜单的 submenu-is-active 类，再切换当前子菜单状态；
3. 点击页面任意非菜单区域时：收起所有子菜单并隐藏背景遮罩。

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

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

  // 点击主菜单项（.menus_li）时的处理
  $(".menus_li").on('click', function(e) {
    e.stopPropagation(); // 阻止事件冒泡，避免触发 document 的 click
    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'));
  });

  // 点击页面任意位置（非菜单区域）时关闭所有子菜单
  $(document).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() 不可省略：防止 .menus_li 的点击事件向上冒泡至 document，导致刚点开就立刻关闭；
• 使用 $(document) 而非 $('body') 绑定全局点击：更可靠地捕获全页面点击（尤其在动态内容或滚动场景下）；
• CSS 中 .blocks_ul.submenu-is-active { display: block; } 是显隐核心，确保该规则权重足够，不被其他 display 声明覆盖；
• 背景遮罩 .bg_submenu 的 z-index: 1 需低于菜单（z-index: 2），保证菜单始终在最上层，符合视觉层级逻辑。

✅ 最终效果

• ✅ 点击「Cars +」→ 展开 Cars 子菜单，背景变暗；
• ✅ 再点击「Computers +」→ Cars 子菜单自动收起，Computers 子菜单展开，背景保持显示；
• ✅ 点击菜单以外任意空白处 → 所有子菜单收起，背景遮罩消失；
• ✅ 支持多次切换，状态完全可控、无残留。

此方案简洁健壮，兼容主流浏览器，适用于各类基于 jQuery 的导航组件开发，是实现专业级下拉菜单交互的推荐实践。