本文介绍如何使用jquery为移动端下拉菜单实现“点击展开当前项、自动收起其他已展开项”的交互逻辑，避免多个子菜单同时打开，提升用户体验。
本文介绍如何使用jquery为移动端下拉菜单实现“点击展开当前项、自动收起其他已展开项”的交互逻辑，避免多个子菜单同时打开，提升用户体验。
在构建响应式导航菜单（尤其是移动端折叠式下拉菜单）时，一个常见且关键的交互需求是：每次仅允许一个子菜单处于展开状态。当用户点击某个菜单项时，不仅需切换其对应子菜单的显示/隐藏，还应确保其余所有已展开的子菜单自动收起。原始代码中为每个菜单项单独绑定 click 事件并调用 .toggle()，导致各子菜单状态互不干扰，违背了单选折叠的设计原则。
解决方案的核心在于统一事件委托 + 状态归一化控制：将事件监听器绑定到父容器（如 #menu-menu），利用事件冒泡捕获点击行为；再通过 jQuery 的链式操作，先隐藏所有兄弟子菜单，再切换当前项的子菜单。
以下是优化后的完整实现：
jQuery(document).ready(function($) {
$("#menu-menu").on("click", "> li", function(e) {
// 阻止 <a> 标签默认跳转（如有需要）
e.preventDefault();
// 获取当前点击项下的 ul 子菜单
var $currentSubmenu = $(this).find("ul");
// 隐藏所有兄弟项下的 ul（排除当前项）
$("#menu-menu > li").not(this).find("ul").hide(200);
// 切换当前项的子菜单（展开或收起）
$currentSubmenu.toggle(200);
});
});配套 HTML 结构保持简洁语义化，无需为每个菜单项添加独立类名（如 menuone/menutwo），仅需确保结构层级清晰：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu-menu" class="menu dropdown-menu">
<li><a href="#">About Us</a>
<ul>
<li>Company Overview</li>
</ul>
</li>
<li><a href="#">Solutions</a>
<ul>
<li>Receivable Finance and Collections</li>
<li>Workers Comp Financing</li>
</ul>
</li>
<li><a href="#">Provider Type</a>
<ul>
<li>Doctors</li>
<li>Pharmacy</li>
</ul>
</li>
</ul>✅ 优势说明：
- 可维护性强：新增菜单项无需修改 JS，HTML 扩展即生效；
- 性能更优：采用事件委托，避免为每个
- 绑定独立监听器；
- 行为一致：无论点击哪个主菜单项，系统始终保证“至多一个子菜单展开”；
- 动画平滑：.hide(200) 与 .toggle(200) 使用相同缓动时长，视觉连贯。
⚠️ 注意事项：
- 若菜单中包含外部链接（非纯触发器），建议在 e.preventDefault() 前加判断，例如仅对无子菜单或特定类名的 阻止跳转；
- 确保子菜单
- 是直接子元素（即 > li > ul 层级），否则 $(this).find("ul") 可能匹配到嵌套深层结构；
- 在真实项目中，建议配合 CSS 添加 overflow: hidden 和过渡样式，进一步增强折叠动画质感。
通过这一模式，你不仅能解决多菜单并发展开的问题，也为后续集成键盘导航（如 Enter/Space 触发、Tab 键顺序控制）和 ARIA 属性（如 aria-expanded）打下良好基础。
