本文详解如何使用 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.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');
}
});
});? 关键要点说明
- 缓存 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 提升触控兼容性（可选增强）。
通过以上结构化实现，你将获得一个行为严谨、体验流畅的单页导航子菜单系统——点击切换、自动互斥、点击外区收起，完全满足专业项目需求。
