Javascript Dropdown-Menü Caret Drehen

Question

Ich habe ein Caret nach unten auf meinem Nav-Element und sobald das Nav-Element angeklickt ist, zeigt es das Dropdown-Menü und dreht das Caret 180 und zeigt es auf. Das einzige Problem ist, wenn Sie auf einen anderen Nav-Eintrag klicken, wird das Dropdown-Menü ausgeblendet, aber der Caret bleibt nach oben gerichtet. Dies ist die Javascript-i

bin mit

$('.nav li a').click(function() { 
    $(this).children('.caret').toggleClass("rotate-180"); 
}); 

Gibt es eine Möglichkeit die Einfügemarke zu drehen wieder einmal nach unten zeigt ein anderes nav Element geklickt wurde?

Answer 1

Ihre HTML nicht gesehen haben, ist das, was ich kam mit:

$('.nav li a').click(function() { 
    $(this).children('.caret').toggleClass("rotate-180"); 
    $(this).closest('.nav').find('li a').not(this).children('.caret').removeClass("rotate-180"); 
}); 

Answer 2

, ohne den Code tthis zu sehen vielleicht nicht die beste Lösung sein, aber Sie können eine .removeClass() Funktion vor dem hinzufügen toggleClass, um alle Einträge zuerst auf die untere Position zurückzusetzen und dann die gewünschte zu drehen.

$('.nav li a').click(function() { 
     $('.nav li a .caret').removeClass("rotate-180"); 
     $(this).children('.caret').addClass("rotate-180"); 
    }); 

Answer 3

$('.nav li a').click(function() { 
    if($(this).hasClass('rotate-180')) { 
     $('.nav li a .caret').removeClass('rotate-180'); 
    } else { 
     $('.nav li a .caret').removeClass('rotate-180'); 
     $(this).children('.caret').addClass("rotate-180"); 
    } 
}); 

Answer 4

Sind Sie sicher, dass Sie Klassen wechseln müssen? Bootstrap macht das wahrscheinlich schon für dich. Zum Beispiel fügen Bootstrap-Dropdown-Listen eine open-Klasse zum Dropdown-Container div hinzu. Sie können ganz einfach ein Nachkomme Stil für diese Situation schaffen:

.dropdown.open .caret { transform: rotate(180deg); }