如何在Bootstrap 4 Accordion卡点击时切换svg图像的旋转

Question

我在Bootstrap 4手风琴卡的每个标题中都有一个svg箭头图像。我希望我打开的收割台的箭头在打开时旋转180度，如果我关闭它或打开另一个收割台，则切换回它的初始状态。现在，箭头只在我按住鼠标时旋转，然后释放鼠标后立即返回到初始状态。有什么帮助吗？

CSS

.arrow:active {

-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);

}

HTML

<div class="card">
<h3> FAQ </h3>
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
How many team members can I invite? 
</button>
<img src="images/icon-arrow-down.svg" class="arrow" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
You can invite up to 2 additional users on the Free plan. There is no limit on 
team members for the Premium plan.
</div>
</div>
</div>

Javascript

$('.arrow').click(function() {
$(this).toggleClass('active');
});

Answer 1

由于使用向下(打开(箭头作为初始状态，因此需要将任何最初关闭的手风琴箭头设置为collapsed，然后在手风琴部分打开时使用此CSS向上翻转图像(打开(。

.arrow:not(.collapsed) {
transform: rotateX(180deg);
}

演示

Answer 2

您可以使用此CSS

.arrow.collapsed {          
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);         
}