实现折叠/展开时Font Awesome Chevron图标的旋转动画

我来帮你补全代码，解决初始状态异常的问题，同时实现平滑的图标旋转动画：

1. 修正初始状态的类（解决你的TODO项） #

Bootstrap折叠组件的逻辑是：当目标面板处于收起状态（没有show类），触发按钮需要添加collapsed类；面板展开时则移除该类。我们先在页面加载时自动修正这个类，避免状态异常：

$('[data-toggle="collapse"]').each(function(){
  const collapser = $(this);
  const targetPanel = $(collapser.data('target'));
  
  // 初始状态判断：如果目标面板未展开，给按钮添加collapsed类
  if (!targetPanel.hasClass('show')) {
    collapser.addClass('collapsed');
  }
  
  // 追加Chevron图标（用原生HTML拼接更清晰，避免转义问题）
  collapser.append('<span style="float:right;"><i class="fa fa-chevron-right"></i></span>');
});

2. 添加平滑旋转的CSS过渡动画 #

光靠JS切换类不够，我们需要给图标加上CSS过渡，让旋转效果更丝滑：

.fa-chevron-right {
  transition: transform 0.3s ease; /* 0.3秒的平滑过渡动画 */
}

/* 按钮未处于collapsed状态（即面板展开）时，图标旋转90度向下 */
[data-toggle="collapse"]:not(.collapsed) .fa-chevron-right {
  transform: rotate(90deg);
}

3. 绑定折叠事件同步图标状态 #

为了确保面板通过其他方式（比如JS触发折叠）时，图标状态也能同步更新，我们监听Bootstrap折叠组件的官方事件：

// 监听面板展开事件，同步图标旋转状态
$('[data-toggle="collapse"]').on('show.bs.collapse', function() {
  $(this).find('.fa-chevron-right').css('transform', 'rotate(90deg)');
});

// 监听面板收起事件，同步图标旋转状态
$('[data-toggle="collapse"]').on('hide.bs.collapse', function() {
  $(this).find('.fa-chevron-right').css('transform', 'rotate(0deg)');
});

完整使用示例 #

<!-- 折叠面板示例 -->
<button class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample">
  点击展开/收起面板
</button>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    这里是折叠面板的内容区域
  </div>
</div>

<!-- 请确保页面已引入以下依赖资源：jQuery、Bootstrap样式与脚本、Font Awesome样式 -->

这样处理后，不管是页面加载的初始状态，还是用户点击、JS触发的折叠操作，Chevron图标都会平滑地旋转切换方向，完美解决你的需求～

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