Javascript 当SVG图标用作手风琴菜单中的点击图标时，如何转换/反转SVG图标

我正在尝试使用jQuery和SVG创建手风琴菜单。
然后，我尝试使用SVG箭头图标作为单击按钮，但无法使图标灵活旋转。
这是我的名片

//SVG箭头图标

//SVG CSS
svg{
填充：#2dac9a；
位置：绝对位置；
顶部：15px；
右：10px；
变换：旋转（180度）；
}
.tr{
变换：旋转（0度）；
}

单击SVG箭头图标时，“setAttribute”方法起作用，
但当我再次单击它时，我不知道如何反转位置。
在我看来，“toggleAttribute”方法也不起作用…（我试过了。）

如果你能教我有效的方法，我将不胜感激。
如果这个问题已经在另一节中解决了，我很抱歉。

---

谢谢。

这将无法按预期工作，请尝试打开此场景，打开第一个场景，不关闭第一个场景，打开第二个场景，然后关闭第二个场景。图标已切换。感谢您的评论。
正如您所指出的，我注意到当我单击第一个按钮和第二个按钮时，第一个按钮仍然处于切换状态
我将尝试改进和利用toggleClass方法。

.tr{
  transform: rotate(0deg);
} // revome this

svg{
     fill: #2dac9a;
     position: absolute;
     top: 15px;
     right: 10px;
     transform: rotate(180deg);
     transition: transform 300ms; // Add this
}

.b svg {
    transform: rotate(0deg); 
} // Add this

.tr{
  transform: rotate(0deg);
} // revome this

svg{
     fill: #2dac9a;
     position: absolute;
     top: 15px;
     right: 10px;
     transform: rotate(180deg);
     transition: transform 300ms; // Add this
}

.b svg {
    transform: rotate(0deg); 
} // Add this