Drehen Sie Font-Awesome Symbol 180deg Inside Dropdown-Button

Question

Ich habe einige benutzerdefinierte Schaltflächenstile erstellt und sie in Dropdown-Menüs mit Bootstraps Drop-Down-Klassen umgewandelt. Wenn ich auf die Schaltflächen klicke, möchte ich, dass das font-awesome-Symbol nach innen um 180 Grad gedreht wird, während das Dropdown geöffnet ist, und um 180 Grad umgekehrt in die ursprüngliche Position drehen, nachdem der Button aktiv/Fokus verloren hat.

Der Code, den ich rechts haben konnte, dreht das Symbol um 180 Grad und zeigt es nach oben. Aber ich kann es nicht zurückdrehen. Außerdem habe ich diese 2 CSS-Klassen. Ich lasse sie auskommentiert, weil sie nur einen merkwürdigen Fade-Effekt erzeugen. Code ist unten ..

HTML:

<div class="dropdown"> 
      <a id="dropdown1" class="hlo-btn-round-dropdown dropdown-toggle " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" tabindex="1">Dropdown <i class="fa fa-chevron-down fa-color icon-rotates" aria-hidden="true"></i></a> 
      <ul class="dropdown-menu" aria-labelledby="dropdown1"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      </ul> 

</div> 

CSS:

.icon-rotates { 
    -moz-transition: all 1s linear; 
    -webkit-transition: all 1s linear; 
    transition: all 1s linear; 
} 

.icon-rotates.rotate { 
    -moz-transition: rotate(180deg); 
    -webkit-transition: rotate(180deg); 
    transition: rotate(180deg); 
} 

JS: Ich habe dies mit den kommentierten Klassen gewesen, weil sie alles komisch machen ..

$('.hlo-btn-round-dropdown').click(function(){ 

    if($(this).css("transform") == 'none') { 
    $(this).children().css('transform', 'rotate(180deg)'); 
    } else { 
    $(this).children().css('transform', 'none'); 
    } 

}); 

Vielen Dank im Voraus für alle Antworten! jQuery scheint mir immer Probleme zu geben, oder vielleicht kombiniere ich zu viele Methoden, um dieses Idk zu drehen.

Answer 1

Eigentlich können Sie es mit Bootstrap-Klasse tun.Sie müssen nicht extra Jquery-Code schreiben.

Haben Sie bemerkt, dass bei geöffnetem Dropdown-Fenster eine zusätzliche Klasse (geöffnet) angezeigt wird? Wenn .dropdown also die Klasse .open (wie .dropdown.open) hat, dann fügen Sie der .icon-rotiert eine zusätzliche Regel hinzu (wie .dropdown.open .icon-rotiert).

.icon-rotates { 
 
    -moz-transition: all 1s linear; 
 
    -webkit-transition: all 1s linear; 
 
    transition: all 1s linear; 
 
} 
 

 
.icon-rotates.rotate { 
 
    -moz-transition: rotate(180deg); 
 
    -webkit-transition: rotate(180deg); 
 
    transition: rotate(180deg); 
 
} 
 

 

 
.dropdown.open .icon-rotates { 
 
    -webkit-transform: rotate(180deg); 
 
    transform: rotate(180deg); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
    
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
\t <div class="dropdown"> 
 
\t \t <a id="dropdown1" class="hlo-btn-round-dropdown dropdown-toggle " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" tabindex="1">Dropdown <i class="fa fa-chevron-down fa-color icon-rotates" aria-hidden="true"></i></a> 
 
\t \t <ul class="dropdown-menu" aria-labelledby="dropdown1"> 
 
\t \t \t <li><a href="#">Action</a></li> 
 
\t \t \t <li><a href="#">Another action</a></li> 
 
\t \t \t <li><a href="#">Something else here</a></li> 
 
\t \t \t <li role="separator" class="divider"></li> 
 
\t \t \t <li><a href="#">Separated link</a></li> 
 
\t \t </ul> 
 

 
\t </div>

Answer 2

Da Sie Bootstrap verwenden, können Sie hiddden.bs.dropdown Ereignis in der Dropdown-Capture, um herauszufinden, wenn der Drop-Down auf das Symbol wieder in der normalen Lage-

$(".dropdown").on("hidden.bs.dropdown", function(){ 
    $(this).find('.hlo-btn-round-dropdown').children().css('transform', 'none'); 
}); 

Hier wurde geschlossen, und drehen Sie ist ein Arbeits JSFiddle dies zu sehen in Aktion - https://jsfiddle.net/schikara/qre4wpcb/1/