如何修改jQuery代码实现点击下拉切换时隐藏其他已展开下拉菜单

嘿，这个导航菜单的需求太常见啦，我来帮你调整这段jQuery代码，实现点击一个按钮时自动收起其他已展开的下拉菜单。

核心思路很简单：每次点击.ldropdown-toggle按钮时，先把除了当前按钮对应的下拉菜单之外的所有.ldropdown都隐藏，再切换当前下拉的显示状态。

修改后的代码如下：

// Dropdown toggle
jQuery('.ldropdown-toggle').click(function(){
    // 缓存当前按钮对应的下拉菜单元素，避免重复DOM查询
    const currentDropdown = jQuery(this).next('.ldropdown');
    // 隐藏所有其他已展开的下拉菜单
    jQuery('.ldropdown').not(currentDropdown).hide();
    // 切换当前下拉菜单的显示/隐藏状态
    currentDropdown.toggle();
});

代码细节解释： #

• const currentDropdown = jQuery(this).next('.ldropdown')：先定位到当前点击按钮对应的下拉菜单，用变量缓存起来，减少重复查找DOM的开销。
• jQuery('.ldropdown').not(currentDropdown).hide()：选中页面上所有下拉菜单，排除当前点击对应的那个，统一执行隐藏操作——这一步就是实现“关闭其他菜单”的关键。
• currentDropdown.toggle()：最后切换当前下拉的状态：如果之前是隐藏的就展开，是展开的就收起，保持单个按钮的切换逻辑不变。

这样修改后，不管你点击哪个按钮，页面上最多只会有一个展开的下拉菜单，完全满足你的需求～

内容的提问来源于stack exchange，提问作者a1anm