如何隐藏拥有相同类名的不同Dropdown菜单？

核心问题 #

1. 点击新的Dropdown时，未主动关闭已展开的其他Dropdown菜单
2. 全局点击事件中的判断逻辑错误：$trigger !== event.target是jQuery对象与DOM元素的无效比较，永远不成立；且未正确判断点击操作是否属于任意一个Dropdown内部元素

修正后的代码 #

JavaScript

$(document).ready(function() {
    // 处理Dropdown点击
    $(".dropdown").click(function(event) {
        // 阻止事件冒泡，避免触发全局点击事件导致菜单刚展开就关闭
        event.stopPropagation();
        // 关闭所有当前点击项之外的Dropdown菜单
        $(".dropdown-menu").not($(this).find(".dropdown-menu")).slideUp("fast");
        // 切换当前Dropdown菜单的显示状态
        $(this).find(".dropdown-menu").slideToggle("fast");
    });
});

// 全局点击关闭所有Dropdown菜单
$(document).on("click", function() {
    $(".dropdown-menu").slideUp("fast");
});

HTML（保持原结构即可）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li class="dropdown">
            <a href="#">Products &#9662;</a>
            <ul class="dropdown-menu">
                <li><a href="#">Laptops</a></li>
                <li><a href="#">Monitors</a></li>
                <li><a href="#">Printers</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="#">Products &#9662;</a>
            <ul class="dropdown-menu">
                <li><a href="#">Laptops</a></li>
                <li><a href="#">Monitors</a></li>
                <li><a href="#">Printers</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
</body>

关键修改说明 #

• 添加event.stopPropagation()：阻止Dropdown的点击事件向上冒泡到document，避免全局点击逻辑直接关闭刚展开的菜单
• 精准关闭其他菜单：用.not()方法排除当前点击项的菜单，只关闭其余已展开的Dropdown
• 简化全局点击逻辑：只要点击操作不属于Dropdown内部（已通过事件冒泡拦截），就统一关闭所有菜单

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