使用Vanilla JS实现点击按钮时旋转fa-chevron-up图标

没问题！这个需求确实不难，用原生JS配合CSS过渡就能轻松实现，核心就是通过切换按钮的类来控制图标的旋转状态。我给你整理一套完整的实现方案，代码都有详细注释：

1. 基础HTML结构 #

先搭好按钮和折叠内容的骨架，图标直接用Font Awesome的fa-chevron-up：

<button class="toggle-btn">
  点击切换内容
  <i class="fa-solid fa-chevron-up"></i>
</button>
<div class="content" hidden>
  这里是展开后显示的内容，随便填充你需要的文本或组件～
</div>

注：如果你的Font Awesome是v4版本，图标类要改成fa fa-chevron-up

2. CSS样式（核心是旋转动画） #

给图标加上过渡效果，再定义一个类来实现180度旋转，让动画更平滑：

/* 给图标添加过渡，让旋转动作有动画感 */
.toggle-btn .fa-chevron-up {
  transition: transform 0.3s ease;
  margin-left: 8px; /* 可选：给图标和文字加个间距 */
}

/* 切换这个类，让图标旋转180度（从向上变成向下） */
.toggle-btn .fa-chevron-up.rotated {
  transform: rotate(180deg);
}

/* 可选：给按钮和内容加点基础样式，让界面更美观 */
.toggle-btn {
  padding: 8px 16px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  background-color: #f5f5f5;
}
.content {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 4px;
}

3. 原生JS逻辑 #

监听按钮点击事件，同步切换内容的显示状态和图标的旋转类：

// 获取页面元素
const toggleBtn = document.querySelector('.toggle-btn');
const content = document.querySelector('.content');
const icon = toggleBtn.querySelector('.fa-chevron-up');

// 绑定点击事件
toggleBtn.addEventListener('click', () => {
  // 切换内容的隐藏/显示状态
  const isContentHidden = content.hidden;
  content.hidden = !isContentHidden;
  
  // 同步切换图标的旋转类：内容展开时加rotated，折叠时移除
  icon.classList.toggle('rotated', !isContentHidden);
});

这里用了classList.toggle()的第二个参数，它可以根据布尔值来决定是添加还是移除类，比手动写if-else更简洁。

这样点击按钮时，内容展开→图标旋转180度（向下）；再次点击折叠内容→图标旋转回原位（向上），完全符合你的需求～

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