Ändern fontawesome icons jquery on-the-fly

Habe ich eine Navigations-menu, einige davon mit Untermenüs. Ich will das menuitem mit fa-chevron-down(Pfeil nach unten icon) zu ändern, um zu fa-chevron-up (Pfeil-Symbol), wenn der Benutzer klickt auf das Menü und die änderungen wieder zurück, wenn der Benutzer klickt irgendwo sonst. Plus ich habe auch zwei request,

1) Da bin ich sehr neu in jquery der jquery code, den ich schrieb scheint
den trick tun, aber gibt es eine bessere Möglichkeit? (beachten Sie, wenn ein Menüpunkt angeklickt wird zweimal die Gleit-statt zweimal. SEINE LÄSTIGE)

2) Wenn der Benutzer die Fenstergröße ändert die html-Elemente doesnot bleibt an Ort und Stelle
und streut.

Vielen Dank im Voraus.

jsfiddle demo

UPDATE :
Vielen Dank für die Lösung meines Problems. Ich verfeinerte mein problem weiter und es funktioniert perfekt. Hier ist der Letzte** JSFIDDLE**

  • Ich habe die jsfiddle. Ich habe nicht den code aktualisieren!
InformationsquelleAutor Arin Chakraborty | 2014-05-14
  1. 19

    Für das ändern der Ikone, die Sie leicht tun können, so etwas in Ihr Klick-Ereignis:

    $(this).find($(".fa")).removeClass('fa-chevron-down').addClass('fa-chevron-up');

    Weitere nehmen Sie einen Blick auf jsfiddle Beispiel:

    jsfiddle-Beispiel

    • Ich danke Ihnen sehr. Ihre bearbeiteten jsfiddle löste nicht nur meine fontawesome problem aber auch gelöst jedes andere problem. Jetzt ist mein Menü doesnot zeigt sich, zweimal geklickt 2. mal und es eher geschlossen, bis. VIELEN DANK. jsfiddle.net/pjQP7/9
    • nur noch eine Frage. Wenn Sie bemerken genau, wenn Sie auf das icon selbst, es verhält sich anders, und wenn Sie klicken Sie auf die Menü-name verhält es sich anders. WARUM ?
    • Ok, Let me fix it.
    • Ich habe gerade Aktualisiert, jsfiddle, werfen Sie einen Blick auf es.
    • Wenn Sie nicht über andere Klassen, Sie können einfach tun eine $('.fa').attr('class','fa fa-chevron-up');
    InformationsquelleAutor Armen
  2. 9

    Ich denke, es gibt keine Notwendigkeit für die änderung der Klasse.

    Wenn Sie nur wollen, ändern Sie die fa-chevron-down zu fa-chevron-up Symbol, statt der Umstellung der Klassen, benutzen Sie einfach toggleClass für fa-rotate-180. fa-rotate-180 dreht sich das icon und es vielleicht lösen Ihren Zweck. Keine Notwendigkeit für das hinzufügen/entfernen einzelner Klassen.

    Sagen wir mal:

    $('selector').click(function(){
    $('menu-selector').toggleClass('fa-rotate-180');    
});

    Es ist nur ein Beispiel. Sie können es umgehen.

    • wie kann ich zu i tag, wenn darauf geklickt wurde a tag in diesem code <a href="#"><i class="fa fa-chevron-up"></i></a>.
    • Sie können sich auf ich mit $(this).find('i': first') oder $(this).Kinder();
    • Ich liebte Ihre Lösung. jsfiddle.net/pjQP7/9 löste ich meine andere, große Probleme mit Ihrer Lösung.
    • Nur noch eine Frage. Wenn Sie bemerken genau, wenn Sie auf das icon selbst, es verhält sich anders, und wenn Sie klicken Sie auf die Menü-name verhält es sich anders. Können Sie mir sagen, warum. Bitte
    InformationsquelleAutor K K
  3. 1

    Font Awesome v5 geändert hat, die Dinge ein wenig Recht.

    Dies ist der code, den ich verwendet, um einen plus - /minus-Schaltfläche ausblenden arbeiten mit Bootstrap, JQuery und FontAwesome.

    HTML:

    <a class="btn btn-collapse" id="btn-collapse" data-toggle="collapse" data-target="#collapse-section"><i class="fas fa-minus"></i></a>

    JQuery-Skript:

    $("#btn-collapse").click(function() {
    if ($(this).hasClass('collapsed')) {
        $(this).find('svg').attr('data-icon', 'minus');
    } else {
        $(this).find('svg').attr('data-icon', 'plus');
    }
});

    Sollten Sie in der Lage sein zu ersetzen, plus/minus für chevron nach oben und unten.

    InformationsquelleAutor Dagmar
Schreibe einen Kommentar