Bootstrap 4.6折叠面板（Accordion）图标切换疑问：基于collapsed类的JS逻辑为何未生效？

我完全懂你这种困惑——明明写了逻辑判断折叠状态来切换加减图标，点击面板时DOM里的collapsed类确实变了，但图标就是没跟着更新。核心问题其实很简单：你的JS代码只执行了一次，也就是页面刚加载的时候，之后折叠面板状态变化时，这段逻辑根本没被重新触发。

为什么原代码不生效？ #

Bootstrap的折叠组件是靠它自带的JS来控制collapsed类的切换的。你写的那段判断代码，如果只是直接放在页面脚本里，只会在页面初始化时运行一次。当你点击面板触发折叠/展开时，Bootstrap更新了DOM类，但你的代码没有被再次调用，自然图标状态不会跟着变。

两种可行的解决方法 #

方法一：监听Bootstrap折叠组件的专属事件 #

Bootstrap折叠组件提供了一系列状态变更事件，我们可以把图标切换逻辑封装成函数，绑定到这些事件上，确保每次状态变化都触发更新：

// 先把图标切换逻辑封装成可复用的函数
function toggleCollapseIcons() {
  const collapseBtn = document.getElementById('candidateName');
  const plusIcon = document.querySelector('.fa-plus');
  const minusIcon = document.querySelector('.fa-minus');
  
  if (collapseBtn.classList.contains('collapsed')) {
    minusIcon.style.display = 'none';
    plusIcon.style.display = 'block';
  } else {
    plusIcon.style.display = 'none';
    minusIcon.style.display = 'block';
  }
}

// 页面加载时先执行一次，初始化图标状态
toggleCollapseIcons();

// 监听折叠面板的展开/完成事件
document.getElementById('candidateName').addEventListener('shown.bs.collapse', toggleCollapseIcons);
document.getElementById('candidateName').addEventListener('hidden.bs.collapse', toggleCollapseIcons);

这样每次折叠面板完成展开或折叠动作后，都会自动调用图标切换函数，状态就能同步了。

方法二：用CSS实现（更简洁，无需额外JS） #

其实不用写JS也能搞定，Bootstrap的折叠按钮在状态变化时会自动添加/移除collapsed类，我们可以用CSS的类选择器直接控制图标显示：

先调整HTML结构，把两个图标放在同一个按钮容器里：

<button class="btn collapsed" data-toggle="collapse" data-target="#your-collapse-id" id="candidateName">
  <i class="fa fa-plus"></i>
  <i class="fa fa-minus"></i>
  面板标题
</button>
<div class="collapse" id="your-collapse-id">
  <!-- 面板内容 -->
</div>

然后添加CSS：

/* 默认折叠状态：显示加号，隐藏减号 */
#candidateName .fa-minus {
  display: none;
}
#candidateName .fa-plus {
  display: inline-block;
}

/* 展开状态（无collapsed类）：显示减号，隐藏加号 */
#candidateName:not(.collapsed) .fa-minus {
  display: inline-block;
}
#candidateName:not(.collapsed) .fa-plus {
  display: none;
}

这种方式更贴合Bootstrap的设计思路，用CSS监听类的变化来控制显示，代码更少也更易维护。

内容的提问来源于stack exchange，提问作者Vivek K.