我如何在 Bootstrap 4 手风琴卡中单击时切换 svg 图像的旋转？

Question

我的 Bootstrap 4 手风琴卡片的每个 header 中都有一个 svg 箭头图像。我希望 header I open 的箭头在打开时旋转 180 度，并在我关闭它或打开另一个 header 时切换回初始状态。现在箭头只会在我按住鼠标时旋转，然后 return 一松开鼠标就回到初始状态。有帮助吗？

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

你可以使用这个CSS

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

Answer 2

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

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

Demo

我如何在 Bootstrap 4 手风琴卡中单击时切换 svg 图像的旋转？

How do i toggle rotation on svg images in Bootstrap 4 Accordion card on click?

javascript

css

accordion

bootstrap-4

svg-transforms