Bootstrap Accordion旋转图标打开时

问题描述

我有一个bootstrap 4手风琴，我需要的图标是在手风琴“打开”时有条件地旋转和向上指向的图标，在关闭时使其向下倾斜的图标。我能够使用CSS做到这一点，但我需要有条件地进行操作，因为存在“活动”状态，而不是在合理的情况下应该触发手风琴打开的事件。

HTML：

<div class="accordion" id="accordion-nav">

    <div class="accordion-item">
        <div class="item-header" id="heading">
            <button class="btn btn-link btn-nav-accordion" type="button" data-toggle="collapse"
                data-target="#collapseDosing" aria-expanded="false" aria-controls="collapseDosing">
                <span>panel</span>
                <i class="fas fa-chevron-down "></i>
            </button>
        </div>

        <div id="collapseDosing" class="collapse collapse-nav-accordion"
            aria-labelledby="heading-dosing" data-parent="#accordion-nav">
            <div class="accordion-body">
                <div class="l-accordion-body">
                   <h1>Body</h1>>
                </div>
            </div>
        </div>
    </div>

    <div class="accordion-item accordion-item--savings">
        <div class="item-header" id="heading-savings">
            <button class="btn btn-link btn-nav-accordion" type="button" data-toggle="collapse"
                data-target="#collapseSavings" aria-expanded="false" aria-controls="collapseSavings">
                <span>panel</span>
                <i class="fas fa-chevron-down"></i>
            </button>
        </div>
        <div id="collapseSavings" class="collapse collapse-nav-accordion"
            aria-labelledby="heading-savings" data-parent="#accordion-nav">
            <div class="accordion-body">
                <div class="l-accordion-body">
                 <h1>Body</h1>
                </div>
            </div>
        </div>
    </div>
</div>

css ：（在click事件上做过工作），但有条件地需要另外一种方式（js）我想

.btn-nav-accordion[aria-expanded="true"] {
  .fa-chevron-down {
    transform: rotate(180deg);
  }
}

js：当前有效，但是当我单击手风琴立即关闭时不会删除该类

 $(".collapse-nav-accordion").each(function () {
      var currentAccordion = this;
      if ($(currentAccordion).hasClass("show")) {
        $(currentAccordion).parent().find("i").addClass("rotate");
      } else {
        $(currentAccordion).parent().find("i").removeClass("rotate");
      }
    });

解决方法

您的问题是，您正在使用需要编译为CSS的CSS。另外，不需要您的js。

.btn-nav-accordion[aria-expanded="true"] .fa-chevron-down {
  transform: rotate(180deg);
}

.fa-chevron-up {
    transition: all 0.3s ease;
 }
.btn-nav-accordion.collapsed .fa-chevron-up {
  transform: rotate(180deg);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="accordion" id="accordion-nav">

  <div class="accordion-item">
    <div class="item-header" id="heading">
      <button class="btn btn-link btn-nav-accordion collapsed" type="button" data-toggle="collapse" data-target="#collapseDosing" aria-expanded="false" aria-controls="collapseDosing">
                <span>panel</span>
                <i class="fas fa-chevron-up"></i>
            </button>
    </div>

    <div id="collapseDosing" class="collapse collapse-nav-accordion" aria-labelledby="heading-dosing" data-parent="#accordion-nav">
      <div class="accordion-body">
        <div class="l-accordion-body">
          <h1>Body</h1>
        </div>
      </div>
    </div>
  </div>

  <div class="accordion-item accordion-item--savings">
    <div class="item-header" id="heading-savings">
      <button class="btn btn-link btn-nav-accordion" type="button" data-toggle="collapse" data-target="#collapseSavings" aria-expanded="true" aria-controls="collapseSavings">
                <span>panel</span>
                <i class="fas fa-chevron-up"></i>
            </button>
    </div>
    <div id="collapseSavings" class="collapse collapse-nav-accordion show" aria-labelledby="heading-savings" data-parent="#accordion-nav">
      <div class="accordion-body">
        <div class="l-accordion-body">
          <h1>Body</h1>
        </div>
      </div>
    </div>
  </div>
</div>

,

在您的代码中：

if ($(currentAccordion).hasClass("show")) {
    $(currentAccordion).parent().find("i").addClass("rotate");
  } else {
    $(currentAccordion).parent().find("i").removeClass("rotate");
  }

您使用的是“ rotate”类，但尚未指定“ rotate”的作用-是另一个css定义（如.rotate {transform: rotate(180deg);})还是js行为（如if (el.hasClass('rotate')) { el.style.transform = rotate(180deg); } ？

或者，我只想切换类，在fa-chevron-down和fa-chevron-up之间切换：

if (el.hasClass('rotate') { 
    el.classList.replace('fa-chevron-down','fa-chevron-up');
} else {
    el.classList.replace('fa-chevron-up','fa-chevron-down');
}