17370845950

本文详解如何使用 jquery 实现导航栏中子菜单的智能切换逻辑——点击某菜单项时展开其子菜单，同时自动收起其他已展开项，并支持点击页面空白处关闭所有子菜单。

在构建响应式水平导航菜单时，一个常见且关键的交互需求是：每次仅允许一个子菜单处于展开状态，避免多个下拉菜单同时显示造成视觉混乱与用户体验下降。原始代码中仅对当前点击项调用 toggleClass('submenu-is-active')，却未处理其他已激活的子菜单，导致“越点越多”的问题。

要解决该问题，核心思路是：先统一收起所有子菜单，再单独展开当前项。以下是优化后的完整实现方案：

✅ 正确的 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.hasC
lass('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');
    }
  });
});

? 关键要点说明

• 缓存 DOM 查询：$blocks 和 $background 在初始化时统一获取，避免重复查询，提升性能；
• 精准事件委托：使用 .on() 替代 .click()，更符合现代 jQuery 最佳实践；
• stopPropagation() 必不可少：防止点击 或
• 内部元素时触发 body 的关闭逻辑；
• not() 方法高效排他：$blocks.not($thisBlock) 精准筛选出“其他”子菜单，语义清晰、执行高效；
• 背景遮罩联动控制：通过 $background.toggleClass('show', condition) 实现与子菜单状态强绑定，避免手动判断；

? 注意事项

• 确保 jQuery 版本 ≥ 3.0（示例使用 3.3.1），以兼容 closest() 和现代事件语法；
• CSS 中 .blocks_ul.submenu-is-active { display: block; } 是显示子菜单的关键样式，不可遗漏；
• 若菜单含多级嵌套（三级+），需额外递归处理或改用更健壮的组件库（如 Bootstrap Dropdown）；
• 移动端建议补充 touchstart 事件监听，或使用 pointerdown 提升触控兼容性（可选增强）。

通过以上结构化实现，你将获得一个行为严谨、体验流畅的单页导航子菜单系统——点击切换、自动互斥、点击外区收起，完全满足专业项目需求。