J'ai un accordéon bootstrap 4, ce dont j'ai besoin est l'icône pour tourner et pointer conditionnellement lorsque l'accordéon est "ouvert" et redescendre lorsqu'il est fermé. J'ai pu le faire avec css mais j'ai besoin que cela se produise de manière conditionnelle car il y a des états "actifs" et non des événements qui devraient déclencher l'ouverture des accordéons si cela a du sens.

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: (a fonctionné sur l'événement de clic) mais a besoin d'un autre moyen conditionnellement (js) je pense

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

Js: fonctionne actuellement mais ne supprime pas la classe lorsque je clique sur l'accordéon pour fermer maintenant

 $(".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");
      }
    });
0
hendy0817 31 août 2020 à 18:59

2 réponses

Meilleure réponse

Votre problème est que vous utilisez scss qui doit être compilé en css. De plus, votre js n'est pas nécessaire.

.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>
3
dantheman 31 août 2020 à 17:07

Dans votre code:

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

Vous utilisez la classe "rotate", mais vous n'avez pas spécifié ce que fait "rotate" - est-ce une autre définition CSS (comme .rotate {transform: rotate(180deg);}) ou est-ce un comportement js, (comme if (el.hasClass('rotate')) { el.style.transform = rotate(180deg); }?

Alternativement, j'aime simplement basculer entre les classes, basculer entre fa-chevron-down et 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');
}
0
Brittany Dilts 31 août 2020 à 16:45