Bootstrap 手风琴打开时旋转图标

Question

I have a bootstrap 4 accordion, What I need is the icon to rotate and point up conditionally when the accordion is "open" and back down when it is closed. I was able to do this with css but I need it to happen conditionally as there are "active" states and not events that should trigger the accordions open if that makes sense.

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: (did work on click event) but need another way conditionally (js) I would think

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

js: currently works but does not remove the class when I click the accordion to close now

 $(".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");
      }
    });

Answer 1

Your issue is that you are using scss that needs compiling into css. Also your js isn't needed.

.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>

Answer 2

In your code:

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

you're using class "rotate", but you haven't specified what "rotate" does - is it another css definition (like .rotate {transform: rotate(180deg);}) or is it a js behavior, (like if (el.hasClass('rotate')) { el.style.transform = rotate(180deg); } ?

Alternatively, I like to just toggle classes, switching between fa-chevron-down and 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');
}