如何实现点击另一个Dropdown Menu时关闭已打开的下拉菜单？

当前代码的问题出在：点击按钮时只会切换当前下拉菜单的显示状态，只有点击非按钮区域才会关闭所有下拉。这就导致点击另一个按钮时，之前打开的菜单没法自动关闭。

修复方案 #

修改myFunction函数，在切换当前菜单状态前，先关闭所有其他已打开的下拉菜单，同时优化全局点击事件的判断逻辑（避免点击按钮内的图标时误触发关闭）。

修改后的JavaScript代码 #

function myFunction(a) {
    // 获取当前要操作的下拉菜单
    const currentDropdown = a.parentNode.getElementsByClassName("dropdown-content")[0];
    // 先关闭所有非当前的已打开下拉菜单
    const allDropdowns = document.getElementsByClassName('dropdown-content');
    for (let i = 0; i < allDropdowns.length; i++) {
        const dropdown = allDropdowns[i];
        if (dropdown !== currentDropdown && dropdown.classList.contains('show')) {
            dropdown.classList.remove('show');
        }
    }
    // 切换当前下拉菜单的显示状态
    currentDropdown.classList.toggle("show");
}

document.onclick = function(event) {
    // 检查点击目标是否是按钮或按钮内部元素（比如箭头图标）
    const isButtonArea = event.target.matches('.hero-section-button') || event.target.closest('.hero-section-button');
    if (!isButtonArea) {
        const dropdowns = document.getElementsByClassName('dropdown-content');
        for (let i = 0; i < dropdowns.length; i++) {
            const openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
}

逻辑说明 #

1. 点击按钮时：先遍历所有下拉菜单，关闭除当前菜单外的所有已打开菜单，再切换当前菜单的显示状态，确保同一时间只有一个菜单展开。
2. 点击页面其他区域时：判断点击目标是否属于按钮区域（包括按钮内的图标），如果不是则关闭所有下拉菜单，保持交互逻辑的一致性。

补充提示 #

确保你的CSS中.show类是用来控制下拉菜单显示的（比如默认.dropdown-content设为display: none，.show设为display: block）。

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