点击导航下拉按钮时重置所有按钮状态与aria属性的问题求解

错误原因 #

• 第一个语法错误：classList.remove() 传入的类名多写了前缀.，classList系列方法操作的是纯类名，不需要加CSS选择器的点号，所以你写的.header__button--toggled永远匹配不到实际的类，导致全局清除逻辑完全失效。
• 第二个逻辑遗漏：全局重置阶段只处理了按钮的激活类，没有同步清除所有子菜单的激活类、重置所有按钮的aria-expanded属性，所以之前打开的子菜单和无障碍属性状态都不会同步更新。

直接替换你的JS代码即可，同时支持「点击其他按钮自动收起上一个」、「点击当前激活按钮可收起当前菜单」的交互逻辑，所有无障碍属性也会同步更新：

function dropdownButton() {
    const buttons = document.querySelectorAll('.header__button');
    buttons.forEach(button => {
        button.addEventListener('click', function () {
            // 先判断当前点击的按钮是不是已经处于激活状态
            const isCurrentActive = this.classList.contains('header__button--toggled');
            
            // 全局重置所有按钮、子菜单、aria属性
            buttons.forEach(btn => {
                btn.classList.remove('header__button--toggled');
                btn.setAttribute('aria-expanded', 'false');
                btn.nextElementSibling.classList.remove('header__sub-menu--toggled');
            });

            // 如果当前点击的按钮之前未激活，就激活它；如果已经激活，重置后就保持收起状态
            if (!isCurrentActive) {
                this.classList.add('header__button--toggled');
                this.setAttribute('aria-expanded', 'true');
                this.nextElementSibling.classList.add('header__sub-menu--toggled');
            }
        });
    });
}
dropdownButton();

优化说明 #

• 把var换成了块级作用域的const/forEach，避免旧版JS变量提升导致的潜在问题
• 增加当前激活状态判断，支持点击当前按钮收起的交互，更符合普通用户的操作习惯
• 全局重置阶段统一处理按钮类、子菜单类、aria属性三类状态，保证所有状态完全同步

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