如何使用classList.toggle为多个类元素统一切换指定类

你之前的写法未生效是因为querySelector仅返回匹配选择器的第一个元素，要选中所有符合条件的元素需使用querySelectorAll，该方法会返回包含所有匹配元素的NodeList集合，遍历集合即可批量执行类切换，无需单独声明变量处理每个元素。

优化后代码 #

// Menu Toggle
function toggleMe() {
    // 一次性选中所有需要切换类的元素
    const toggleElements = document.querySelectorAll('.header, .another-class');
    // 遍历所有元素执行toggled类切换
    toggleElements.forEach(el => el.classList.toggle('toggled'));
}

旧浏览器兼容写法 #

如果需要兼容不支持NodeList.forEach的老旧浏览器（如IE），可以使用for循环遍历：

// Menu Toggle
function toggleMe() {
    var toggleElements = document.querySelectorAll('.header, .another-class');
    for (var i = 0; i < toggleElements.length; i++) {
        toggleElements[i].classList.toggle('toggled');
    }
}

后续如果需要新增参与切换的元素，直接在querySelectorAll的选择器参数中添加逗号分隔的对应选择器即可，不需要额外新增变量和重复的toggle逻辑。

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