如何用jQuery实现FAQ手风琴组件中SVG箭头的点击旋转与复原？

先补CSS过渡（解决无平滑旋转问题） #

箭头旋转没过渡，本质是没给SVG加过渡动画属性，把这段CSS加上：

.arrow-down {
  /* 保留你自己的宽高、颜色等基础样式 */
  width: 20px;
  height: 20px;
  /* 关键：给旋转动作加过渡，时长和答案展开/收起动画保持一致（500ms） */
  transition: transform 0.5s ease;
  /* 初始状态设为0度，确保箭头默认向下 */
  transform: rotate(0deg);
}

.rotate-180 {
  transform: rotate(180deg);
}

优化jQuery逻辑（解决状态异常+简化代码） #

之前的JS逻辑冗余且容易出现状态混乱，改成下面的写法，逻辑更清晰：

$(document).ready(function () {
  $(".question").click(function () {
    const $currentQuestion = $(this);
    const $currentAnswer = $currentQuestion.siblings(".answer");
    const $currentArrow = $currentQuestion.children(".arrow-down");
    // 判断当前答案是否处于展开状态
    const isOpen = $currentAnswer.is(":visible");

    // 第一步：统一关闭其他所有答案，将其他箭头恢复初始状态
    $(".answer").not($currentAnswer).hide(500);
    $(".arrow-down").not($currentArrow).removeClass("rotate-180");

    // 第二步：处理当前项的展开/收起逻辑
    if (isOpen) {
      $currentAnswer.hide(500);
      $currentArrow.removeClass("rotate-180");
    } else {
      $currentAnswer.show(500);
      $currentArrow.addClass("rotate-180");
    }
  });
});

为啥之前的方法踩坑了？ #

1. 无过渡效果：之前的.arrow-down未设置transition: transform属性，添加/移除类时旋转动作是瞬间完成的，没有平滑过渡。
2. 旋转变量累加异常：用变量累加角度的方式，会出现角度叠加（比如180°→360°，视觉上和0°一致但实际状态混乱），而用类管理状态是明确的——类要么存在要么不存在，对应固定的旋转状态。
3. 原逻辑冗余：之前的if-else分支重复执行了移除其他箭头类的代码，提取后统一处理，既简洁又避免逻辑冲突。

额外小提示 #

• 给.answer设置初始样式display: none;，确保页面加载时答案默认隐藏。
• 如果项目允许，也可以用原生JS实现以减少依赖，但基于你已使用jQuery的场景，上述方案足够简单高效。

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