如何实现点击已激活按钮隐藏对应下拉菜单

当前下拉菜单已支持：点击其他按钮关闭激活菜单、点击菜单区域外关闭所有菜单，现在补充点击已激活按钮时隐藏其对应下拉菜单的功能，修改后的代码如下：

修改后的JavaScript代码 #

const btn = document.querySelectorAll('.menu_btn');
const menuOff = document.querySelector('.first_menu');

// 仅绑定一次全局点击事件，处理点击区域外关闭所有菜单
document.addEventListener('click', function(e) {
    const clickInsideMenu = e.composedPath().includes(menuOff);
    if (!clickInsideMenu) {
        document.querySelectorAll('.dropdown.active').forEach(item => {
            item.classList.remove('active');
        });
    }
});

btn.forEach(item => {
    item.addEventListener('click', (e) => {
        e.stopPropagation(); // 阻止事件冒泡，避免触发全局区域外关闭逻辑
        const currentBtn = e.currentTarget;
        const targetDropdown = currentBtn.nextElementSibling;
        const isDropdownActive = targetDropdown.classList.contains('active');

        // 先关闭所有已激活的下拉菜单
        document.querySelectorAll('.dropdown.active').forEach(menu => {
            menu.classList.remove('active');
        });

        // 若当前菜单未激活则打开，已激活则保持关闭
        if (!isDropdownActive) {
            targetDropdown.classList.add('active');
        }
    });
});

关键改动说明 #

• 判断菜单激活状态：点击按钮时先检查对应下拉菜单是否已处于激活状态，以此决定是打开还是关闭菜单
• 修复重复事件绑定：将点击区域外关闭菜单的逻辑从按钮点击回调中移出，仅绑定一次，避免多次触发导致的异常
• 阻止事件冒泡：在按钮点击事件中加入e.stopPropagation()，防止点击按钮时误触发全局的区域外关闭逻辑

保留原HTML与CSS代码 #

HTML代码 #

<ul class="first_menu">
    <li class="menu_item">
        <button class="menu_btn">1 btn</button>
        <div class="dropdown">
            <ul class="dropdown__list">
                <li class="dropdown__item">
                    <a href="#" class="dropdown__link">1 Подпункт</a>
                </li>
                <li class="dropdown__item">
                    <a href="#" class="dropdown__link">2 Подпункт</a>
                </li>
                <li class="dropdown__item">
                    <a href="#" class="dropdown__link">3 Подпункт</a>
                </li>
            </ul>
        </div>
    </li>
    <li class="menu_item">
        <button class="menu_btn">2 btn</button>
        <div class="dropdown">
            <ul class="dropdown__list">
                <li class="dropdown__item">
                    <a href="#" class="dropdown__link">1 Подпункт</a>
                </li>
                <li class="dropdown__item">
                    <a href="#" class="dropdown__link">2 Подпункт</a>
                </li>
                <li class="dropdown__item">
                    <a href="#" class="dropdown__link">3 Подпункт</a>
                </li>
            </ul>
        </div>
    </li>
    <li class="menu_item">
        <button class="menu_btn">3 btn</button>
        <div class="dropdown">
            <ul class="dropdown__list">
                <li class="dropdown__item">
                    <a href="#" class="dropdown__link">1 Подпункт</a>
                </li>
                <li class="dropdown__item">
                    <a href="#" class="dropdown__link">2 Подпункт</a>
                </li>
                <li class="dropdown__item">
                    <a href="#" class="dropdown__link">3 Подпункт</a>
                </li>
            </ul>
        </div>
    </li>
</ul>

CSS代码 #

.first_menu {
    position: relative;
    justify-content: center;
    display: flex;
}
.menu_item,.dropdown__item {
    list-style-type: none;
}
.menu_btn {
    cursor: pointer;
    border: none;
    padding: 25px;  
    background-color: black;
    color: #ffffff;
    font-weight: bold;
}
.dropdown {
    transition: all 1s;
    position: absolute;
    top: 0;
    transform: translateY(-100%);
    background-color: black;
}
.dropdown__item {
    text-align: center;
    padding-bottom: 20px;
}
.dropdown__link {
    text-decoration: none;
    color: white;
    font-weight: bold;
}
.active {
    top: 100px;
    transition: all 1s;
    transform: translateY(-30%);
}

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