本文详解如何用 jquery 实现单级下拉菜单的“点击切换”逻辑，确保每次仅展开一个子菜单，并支持点击空白处自动收起，避免多个子菜单同时显示的问题。
在构建响应式水平导航菜单时，常见的交互需求是：点击某个主菜单项（如“Cars +”），展开其对应的子菜单；而当用户点击另一个主菜单项时，已展开的子菜单应自动收起，仅保留当前项的子菜单可见。原始代码中仅对当前元素调用 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');
}
});
});
? 关键细节说明
- 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 导航交互规范。
