点击div添加active类展开，为其余div添加hidden类隐藏的实现方法

嘿，这个需求其实很好实现，核心就是把所有目标div都遍历一遍，区分开被点击的那个和其他元素，分别处理类名就行！我给你理清楚思路，再附上可以直接用的代码：

当用户点击某个div时，我们要做两件事：

• 给被点击的div添加active类（同时记得移除hidden类，避免它之前被隐藏了）
• 给其余所有div添加hidden类，并且移除它们可能存在的active类（防止残留样式）

先假设你的HTML结构是这样的（可以根据实际情况调整选择器）：

<!-- 给所有需要控制的div加一个统一的类，方便选择 -->
<div class="expandable-div">内容1</div>
<div class="expandable-div">内容2</div>
<div class="expandable-div">内容3</div>

CSS部分你已经有hidden类了，这里补充一下示例样式（你可以替换成自己的）：

.hidden {
  display: none;
}
.active {
  /* 你的展开样式，比如高度变化、背景色等 */
  background-color: #f5f5f5;
  padding: 1rem;
  height: auto;
}

接下来是JavaScript代码，有两种常用写法，你可以根据场景选择：

写法1：直接给每个div绑定事件（适合静态div） #

// 获取所有需要控制的div
const allDivs = document.querySelectorAll('.expandable-div');

// 给每个div绑定点击事件
allDivs.forEach(div => {
  div.addEventListener('click', function() {
    // 遍历所有div，逐个处理类名
    allDivs.forEach(item => {
      if (item === this) {
        // 当前点击的div：添加active，移除hidden
        item.classList.add('active');
        item.classList.remove('hidden');
      } else {
        // 其他div：添加hidden，移除active
        item.classList.add('hidden');
        item.classList.remove('active');
      }
    });
  });
});

写法2：事件委托（适合动态生成的div） #

如果你的div是后来通过JS动态添加的（比如分页加载、点击新增），用事件委托会更高效，也不会漏掉新生成的元素：

// 给父容器绑定事件（这里用body，你可以换成更具体的父元素，比如<div class="div-container">）
document.body.addEventListener('click', function(e) {
  // 判断点击的是不是目标div
  if (e.target.classList.contains('expandable-div')) {
    // 获取所有目标div
    const allDivs = document.querySelectorAll('.expandable-div');
    // 遍历处理类名
    allDivs.forEach(item => {
      if (item === e.target) {
        item.classList.add('active');
        item.classList.remove('hidden');
      } else {
        item.classList.add('hidden');
        item.classList.remove('active');
      }
    });
  }
});

如果想要支持再次点击当前div收起的功能，可以把当前点击元素的处理逻辑改成切换类：

if (item === this) {
  // 切换active和hidden类，点击一次展开，再点一次收起
  item.classList.toggle('active');
  item.classList.toggle('hidden');
}

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