时间戳

首页 > 解决方案 > 如何在单击时在 Bootstrap 4 Accordion 卡中切换 svg 图像的旋转？

javascript - 如何在单击时在 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');
});

标签： javascriptcssbootstrap-4accordionsvg-transforms

解决方案

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

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

演示

推荐阅读