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

问题描述

我的 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');
});
       

解决方法

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

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

Demo

,

你可以使用这个 CSS

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