能否通过一次toggle事件为元素添加多个CSS类？

原生的classList.toggle()方法一次只能处理单个类名，没法直接传入多个类名实现批量切换。不过可以通过手动判断类的存在状态，模拟出批量切换的效果：

方案1：直接在事件回调里处理逻辑 #

如果要同时切换open、active、expanded这类多个类，替换你原有的代码即可：

let navLinks = document.querySelectorAll('.nav-link');
navLinks.forEach(navLink => {
  navLink.onclick = e => {
    // 以第一个类作为判断基准，确定当前是添加还是移除操作
    const shouldAddClasses = !e.target.classList.contains('open');
    if (shouldAddClasses) {
      e.target.classList.add('open', 'active', 'expanded');
    } else {
      e.target.classList.remove('open', 'active', 'expanded');
    }
  }
})

方案2：封装复用函数 #

如果需要多次用到批量切换类的功能，可以封装一个工具函数，方便后续调用：

// 自定义批量切换类的工具函数
function toggleMultiClasses(element, ...classes) {
  const hasTargetClass = element.classList.contains(classes[0]);
  hasTargetClass ? element.classList.remove(...classes) : element.classList.add(...classes);
}

// 调用示例
let navLinks = document.querySelectorAll('.nav-link');
navLinks.forEach(navLink => {
  navLink.onclick = e => {
    toggleMultiClasses(e.target, 'open', 'active', 'expanded');
  }
})

另外提一句：你原代码里用了全局的event.target，建议换成回调参数里的e.target，避免依赖全局对象，代码更严谨。

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