如何实现元素CSS类排他性增删？点击展开UI问题求助

首先看你原来的代码，逻辑上有个明显的错误：在shifter函数里，你刚给当前元素加上expand类，就立刻把它赋值给previous，然后又移除这个类，这就等于白加了，而且完全没处理之前选中的元素。下面给你两种可行的解决方案：

方案一：遍历所有元素移除类（简单直观） #

这种方法适合元素数量不多的场景，每次点击时先把所有.box的expand类都移除，再给当前点击的元素加上：

var boxes = document.querySelectorAll(".box");
for(var i=0; i<boxes.length; i++){
 boxes[i].addEventListener("click",shifter);
}
function shifter(){
  // 先移除所有box的expand类
  boxes.forEach(box => box.classList.remove("expand"));
  // 再给当前点击的元素添加类
  this.classList.add("expand");
}

方案二：记录上一个选中元素（性能更优） #

如果元素数量较多，遍历所有元素有点浪费性能，可以用变量记录上一次选中的元素，点击时只操作上一个和当前元素：

var previous = null;
var boxes = document.querySelectorAll(".box");
for(var i=0; i<boxes.length; i++){
 boxes[i].addEventListener("click",shifter);
}
function shifter(){
  // 如果有上一个选中的元素，移除它的expand类
  if(previous){
    previous.classList.remove("expand");
  }
  // 给当前元素添加类
  this.classList.add("expand");
  // 更新previous为当前元素
  previous = this;
}

关于同时添加和移除类的方法 #

当然有！DOM元素的classList对象提供了几个实用的方法：

• toggle()方法：如果元素有某个类就移除，没有就添加。还可以传第二个参数控制强制添加或移除：

  // 切换类：有则删，无则加
  element.classList.toggle("expand");
  // 强制添加类（第二个参数为true）
  element.classList.toggle("expand", true);
  // 强制移除类（第二个参数为false）
  element.classList.toggle("expand", false);
  

• replace()方法：直接用一个类替换另一个类，相当于先移除旧类再添加新类：

  // 用new-class替换old-class
  element.classList.replace("old-class", "new-class");
  

• 手动组合add()和remove()：如果需要同时添加多个类和移除多个类，可以直接连续调用：

  element.classList.remove("class-a", "class-b");
  element.classList.add("class-c", "class-d");
  

这样就能灵活地处理元素的类名啦！

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