Accordion点击后图标不切换求助：面板可展开但符号无变化

问题回顾 #

点击Accordion后面板能正常展开，但右侧"+"图标无法切换为"-"——因为CSS中.accordion.active::after样式未触发；现有JS代码可关闭其他面板，但未对Accordion的active类做切换；注释的JS代码能切换图标，但无法关闭其他已展开面板。

解决方案 #

修改JS代码，同时处理active类切换与其他面板的关闭逻辑，以下是完整可运行的代码：

CSS（无需修改）

.accordion::after {
  content     : '\002B';
  font-size   : 18px;
  color       : #116ce4;
  float       : right;
  margin-left : 10px;
  transition  : transform 0.3s ease-in-out;
}
.accordion.active::after {
  content   : '\2212';
  transform : rotate(45deg);
  color     : #777;
}

修改后的JS代码

const accordionContainer = document.querySelector('.main')
const allAccordions = accordionContainer.querySelectorAll('.accordion')
const allPanels = accordionContainer.querySelectorAll('.panel')

accordionContainer.addEventListener('click', ({ target }) => {
  if (target.classList.contains('accordion')) {
    // 记录当前accordion是否已激活
    const wasActive = target.classList.contains('active')
    
    // 重置所有accordion和panel的状态
    allAccordions.forEach(acc => acc.classList.remove('active'))
    allPanels.forEach(panel => panel.classList.remove('open'))
    
    // 如果原本未激活，则激活当前项并展开面板
    if (!wasActive) {
      target.classList.add('active')
      target.nextElementSibling.classList.add('open')
    }
  }
})

逻辑说明 #

1. 事件委托：通过父容器监听点击，避免给每个accordion绑定事件，性能更优
2. 状态重置：点击任意accordion时，先移除所有accordion的active类和所有panel的open类，确保只有当前项能处于激活状态
3. 切换逻辑：判断当前项原本是否激活，未激活则添加active类并展开面板；已激活则保持重置后的关闭状态，实现点击收起的效果

这样既解决了图标不切换的问题，又保留了关闭其他面板的功能。

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