Accordion切换图标动画异常：切换面板时旧面板图标未更新

核心问题 #

切换面板时，仅处理了当前点击面板的图标状态，未将之前处于展开状态的面板图标重置为关闭状态（加号）。

修复后的代码实现 #

假设HTML结构示例 #

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">
      <span class="toggle-icon">+</span>
      面板标题1
    </div>
    <div class="accordion-content">面板内容1</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">
      <span class="toggle-icon">+</span>
      面板标题2
    </div>
    <div class="accordion-content">面板内容2</div>
  </div>
</div>

CSS样式（适配图标切换逻辑） #

.accordion-content {
  display: none;
}
.accordion-content.active {
  display: block;
}
/* 若用类控制图标，可保留此样式；若直接修改文本则可忽略 */
.toggle-icon.minus {
  content: "-";
}
.toggle-icon.plus {
  content: "+";
}

修复后的jQuery代码 #

$(document).ready(function() {
  $('.accordion-header').click(function() {
    var currentContent = $(this).next('.accordion-content');
    var currentIcon = $(this).find('.toggle-icon');
    var isCurrentActive = currentContent.hasClass('active');

    // 全局重置所有面板状态：关闭展开内容，图标改回加号
    $('.accordion-content.active').removeClass('active');
    // 若用类控制图标，替换为 $('.toggle-icon').removeClass('minus').addClass('plus')
    $('.toggle-icon').text('+');

    // 仅当当前面板原本关闭时，展开并切换图标为减号
    if (!isCurrentActive) {
      currentContent.addClass('active');
      // 若用类控制图标，替换为 currentIcon.addClass('minus').removeClass('plus')
      currentIcon.text('-');
    }
  });
});

关键修复点 #

• 每次点击触发时，先全局重置所有面板的状态：关闭所有已展开的内容，将所有图标统一改回加号。
• 再判断当前点击面板的初始状态，仅当它原本处于关闭状态时，才执行展开和图标切换操作。
• 如果你的原代码是通过CSS类（而非直接修改文本）控制图标显示，只需将代码中修改文本的部分替换为类的添加/移除操作即可。

内容的提问来源于stack exchange，提问作者Tiago Amarilha Rodrigues