点击箭头图标切换类时的jQuery逻辑问题排查

咱们一步一步拆解你遇到的问题，看看代码里哪里出了问题：

• 全局选中所有<i>元素，范围太广：你代码里的$('i').addClass('fa-angle-down');会选中页面上所有的<i>标签，不管它是不是属于.accordion组件的箭头。这不仅可能影响页面上其他无关的图标，更是后续问题的根源。

• 导致箭头同时拥有两个互斥的类：当你点击第二个箭头时，这行代码会给之前已经是fa-angle-up状态的箭头也加上fa-angle-down类，让这个箭头同时拥有up和down两个方向类。而Font Awesome的图标类是互斥的，同时存在这两个类会导致样式冲突，甚至后续操作让图标直接“消失”。

• toggleClass在多类共存时的行为不符合预期：jQuery的toggleClass如果传入多个类，是对每个类单独执行“有则移除，无则添加”的逻辑。如果一个箭头同时有fa-angle-up和fa-angle-down，执行toggleClass会把两个类都移除，导致箭头失去任何图标类，看起来就像是消失了——这就是你点击第三个箭头时遇到的问题。

• 条件判断的逻辑冗余且有漏洞：你的else分支只处理了当前箭头切换回down的情况，但没有考虑其他可能处于up状态的箭头；而if分支里的全局添加down类，虽然看似能重置其他箭头，但实际上制造了多类共存的问题。

修正后的代码示例 #

这里给你一个更稳妥的实现，确保每次只有一个箭头处于up状态：

$('.accordion').click(function() {
  const $currentArrow = $(this).find('i');
  
  // 如果当前箭头已经是展开状态（up），就收起它
  if ($currentArrow.hasClass('fa-angle-up')) {
    $currentArrow.removeClass('fa-angle-up').addClass('fa-angle-down');
  } else {
    // 先把所有处于展开状态的箭头收起
    $('.accordion i.fa-angle-up').removeClass('fa-angle-up').addClass('fa-angle-down');
    // 再展开当前点击的箭头
    $currentArrow.removeClass('fa-angle-down').addClass('fa-angle-up');
  }
});

或者用更简洁的toggle方式（同样避免多类共存）：

$('.accordion').click(function() {
  const $allAccordionArrows = $('.accordion').find('i');
  const $currentArrow = $(this).find('i');
  
  // 如果当前箭头不是up状态，才重置其他箭头
  if (!$currentArrow.hasClass('fa-angle-up')) {
    $allAccordionArrows.removeClass('fa-angle-up').addClass('fa-angle-down');
  }
  // 切换当前箭头的状态
  $currentArrow.toggleClass('fa-angle-down fa-angle-up');
});

这两段代码都只操作.accordion内部的箭头，不会影响全局元素，同时避免了箭头同时拥有两个互斥类的情况，完美实现你要的“每次只有一个箭头展开”的效果。

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