JavaScript手风琴问题：点击切换active类时关闭已展开项

看起来你已经迈出了第一步，但遇到了互斥展开的小问题，咱们来一步步搞定它。

首先，你之前尝试classList.remove(active)报错，大概率是因为把active当成变量用了，但它其实是个类名字符串，应该写成classList.remove('active')——这是新手常踩的小坑😉。

接下来咱们实现点击一个项时关闭其他所有项，只展开当前项的逻辑，分几个步骤来：

1. 先理清楚HTML结构（参考你的场景） #

假设你的手风琴结构大概是这样的（如果你的类名不一样，对应修改就行）：

<div class="accordion-container">
  <!-- 默认第一个项激活 -->
  <div class="accordion-item active">
    <div class="accordion-title">标题1</div>
    <div class="accordion-content">我是默认展开的内容</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-title">标题2</div>
    <div class="accordion-content">我是第二个内容</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-title">标题3</div>
    <div class="accordion-content">我是第三个内容</div>
  </div>
</div>

2. 编写JavaScript逻辑 #

核心思路是：点击标题时，先移除所有手风琴项的active类，再给当前点击的项加上active类。如果需要支持“点击已展开的项可以收起”，可以额外加个判断。

基础版（点击其他项切换，当前项不能收起） #

// 获取所有手风琴标题元素
const accordionTitles = document.querySelectorAll('.accordion-title');

// 给每个标题绑定点击事件
accordionTitles.forEach(title => {
  title.addEventListener('click', function() {
    // 获取当前标题对应的父级手风琴项
    const currentItem = this.parentElement;
    
    // 移除所有手风琴项的active类
    document.querySelectorAll('.accordion-item').forEach(item => {
      item.classList.remove('active');
    });
    
    // 给当前项添加active类
    currentItem.classList.add('active');
  });
});

进阶版（支持点击当前项收起） #

如果需要点击已展开的项可以收起，只需要加个判断，看看当前项原本是不是激活状态：

accordionTitles.forEach(title => {
  title.addEventListener('click', function() {
    const currentItem = this.parentElement;
    const isCurrentlyActive = currentItem.classList.contains('active');
    
    // 先移除所有项的active类
    document.querySelectorAll('.accordion-item').forEach(item => {
      item.classList.remove('active');
    });
    
    // 如果当前项原本没激活，就添加active；如果原本激活，就不添加（实现收起）
    if (!isCurrentlyActive) {
      currentItem.classList.add('active');
    }
  });
});

3. 配合CSS实现显示/隐藏 #

别忘了写对应的CSS，让active类控制内容的显示：

/* 默认隐藏所有内容 */
.accordion-content {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease; /* 可选：添加平滑过渡动画 */
}

/* 激活状态下显示内容 */
.accordion-item.active .accordion-content {
  height: auto; /* 或者固定高度，根据需求调整 */
}

这样改完之后，点击任意标题都会自动关闭其他展开的项，完美实现手风琴的互斥展开效果啦。

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