本文详解如何使用 jquery 实现导航菜单的子菜单「单开模式」（即点击新项时自动收起已展开项），并支持点击菜单外部区域关闭所有子菜单，同时联动半透明背景层的显示/隐藏。
在构建响应式水平导航菜单时，常见的交互需求是：点击某个主菜单项时展开其子菜单，而当用户点击另一个主菜单项时，应自动收起之前展开的子菜单，仅保留当前项的子菜单可见——即「单开（exclusive）」行为。原始代码中仅对当前元素执行 toggleClass()，未处理其他已激活项，导致多个子菜单同时显示，破坏用户体验。
✅ 正确实现逻辑
核心思路分三步：
- 统一管理所有子菜单：预先缓存所有 .blocks_ul 元素；
- 点击主菜单项时：先移除其他子菜单的 submenu-is-active 类，再切换当前子菜单状态；
- 点击页面任意非菜单区域时：收起所有子菜单并隐藏背景遮罩。
以下是优化后的完整 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 的导航组件开发，是实现专业级下拉菜单交互的推荐实践。
