如何在单击时旋转svg并在JQuery中的另一个svg上旋转回其原始版本？

问：

我正在尝试创建一个简单的手风琴常见问题解答 Web 组件。基本上，每个问题旁边都有一个箭头，当问题打开时箭头会旋转 180 度，当问题关闭时会旋转回来。问题将在单击或单击另一个问题时关闭。

我基本上已经完成了我的目标，但是有一个问题，我无法真正找到一种合适的方法来将箭头旋转回去。 在这里，我将为 html 标记提供 JQuery 脚本的一部分，以便您可以有一个可靠的参考（为了避免混淆，我删除了不完整的部分。它最初总共有 5 个问题。

HTML 标记：

          <div class="containerDropdown">
            <p class="question">
              How many...?
              <svg class="arrow-down"...</svg>
            </p>
            <p class="answer">
              You can invite...
            </p>
          </div>

          <div class="containerDropdown">
            <p class="question">
              What is...?
              <svg class="arrow-down"...</svg>
            </p>
            <p class="answer">
              No more than 2GB...
            </p>
          </div>

JQuery 脚本：

$(document).ready(function () {
  const questions = $(".question");
  const answers = $(".answer");
  const arrows = $(".arrow-down");

  questions.click(function () {
    let question = $(this);
    let answer = question.siblings(".answer");
    let arrow = question.children(".arrow-down");

    answers.not(answer).hide(500);
    answer.toggle(500);

    if (arrow.hasClass("rotate-180")) {
      arrows.not(arrow).removeClass("rotate-180");

      arrow.removeClass("rotate-180");
    } else {
      arrows.not(arrow).removeClass("rotate-180");
      arrow.addClass("rotate-180");
    }
  });
});

我试图在那里做的是一种低效（我认为是这样）的 toggleClass（） 方式。我无法使用 toggleClass（） 函数创建算法，因为我想到的只是首先删除所有问题的所有现有旋转类，然后添加到单击的旋转类中。问题是它工作正常，但我在每个箭头上添加了 0.5 秒的过渡，当 removeClass（） 触发时，它会在没有过渡的情况下旋转回来。

我还尝试创建一个旋转变量，并在每次单击时添加 360 度。但是旋转变量会不断叠加，因此，如果您单击另一个问题，它会在第一次单击时旋转 360*n 度。而且箭头会在单击另一个问题时保持抬头查找。

我可能解释得太多了，但我尝试了一些人可能建议的几种方法，我想消除这些方法。