Jquery Code Probleme

Question

Ich versuche zu verstehen, wie meine jQuery funktioniert.

Also im Grunde habe ich ein Untermenü Effekt jQuery und hier ist meine jQuery

$(".sidebar-icon").click(function() {     
    $(".content").toggleClass("sidebar-collapsed").toggleClass("sidebar-collapsed-back"); 
    $(" 
$('.nav a').click(function(){ 
    $(this).closest('li').find('ul').toggleClass('disp'); 

Wer kann mir helfen, jeden Code einzeln zu verstehen und erklären?

Answer 1

.toggleClass(): Hinzufügen oder Entfernen einer oder mehrerer Klassen aus jedem Element in der Menge der übereinstimmenden Elemente, abhängig von der Anwesenheit der Klasse oder dem Wert des state-Arguments.

.find(): Ruft die Nachkommen jedes Elements in der aktuellen Menge übereinstimmender Elemente ab, gefiltert nach einem Selektor, einem jQuery-Objekt oder einem Element.

.closest(): Erhalten Sie für jedes Element in der Menge das erste Element, das dem Selektor entspricht, indem Sie das Element selbst testen und durch seine Vorfahren in der DOM-Struktur durchlaufen.

Für andere Funktion google es einfach! wie jquery removeClass und Sie werden alle Ihre Antwort haben.

Answer 2

.toggleClass überprüft, ob die ausgewählten Elemente die Give-Klasse haben. Wenn sie es tun, entfernt es es, sonst fügt es es hinzu.

In einer Event-Handler-Funktion ist this das Zielelement, auf dem das Ereignis ausgelöst wurde. In einem .click() Handler ist dies das Element, auf das Sie geklickt haben. Dies ist eines der grundlegendsten Dinge, die Sie aus jedem Tutorial oder Lehrbuch über jQuery lernen sollten.

So

$(this).closest('li').find('ul').toggleClass('disp'); 

bedeutet das nächste <li> Element zu finden, der den Link enthält, die Sie auf geklickt haben, dann alle <ul> Elemente in ihm finden, und ihre disp Klassen wechseln.

Answer 3

Nun, da Sie die jQuery-API-Dokumentation nicht zu verstehen scheinen, werde ich sie Zeile für Zeile abbrechen.

Linie 1.

$(".sidebar-icon").click(function() { 

In der ersten Zeile, Sie jquery sagen, dass, wenn Sie mit der Klasse „sidebar-Symbol“ auf das Element klicken, um es (das ist das Burger-Symbol sein geschieht) löst die von Ihnen angegebenen Ereignisse aus, die in {} eingeschlossen sind. click() ist als Methode/Event-Handler bekannt.

Linie 2.

$(".content").toggleClass("sidebar-collapsed").toggleClass("sidebar-collapsed-back"); 

Das hier ist ein Ereignis, das, nachdem Sie auf das Element mit der Klasse Sidebar-Symbol geklickt haben, folgt.

Der erste Teil der Strecke:

$(".content") 

jquery erzählt mit der Klasse „Inhalt“ für das Element zu suchen.

Als nächstes

.toggleClass("sidebar-collapsed").toggleClass("sidebar-collapsed-back"); 

sind Methoden, die jquery nennen, nachdem es das Element gefunden hat Sie angegeben haben. Jedes Mal, wenn auf ".Sidebar-Symbol" geklickt wird, fügt die toggleClass() -Methode im Prinzip die Klasse "sidebar-collapsed" und "sidebar-collapsed-back" zu dem Element mit der Klasse "content" hinzu und entfernt sie Sei in deinem Fall ein Div.

Linie 3.

$("#nav li ul").removeClass('disp'); 

Ähnlich wie die Linie 2, jquery für das Element sieht die id "#nav" (ein ul-Element) und dessen Abkömmling li, dann li Nachkomme ul-Element enthält. Jquery ruft dann die removeClass() -Methode auf und entfernt die Klasse "disp" von diesem Element.

Linien 4 und 5.

$("#nav li").find('span.fa').addClass('fa-plus').removeClass('fa-minus'); 
}); 

nicht viel anders als die oben. Jquery sucht nach dem Element, das die ID "nav" und sein Nachfolgerelement li enthält. Jquery ruft dann die find() -Methode auf und durchläuft den DOM-Baum, um nach dem nachkommenden Span-Element zu suchen, das die Klasse "fa" hat. Jquery ruft dann die addClass-Methode auf und fügt dem span-Element mit der Klasse "fa" die Klasse "fa-plus" hinzu. Auf die gleiche Weise ruft Jquery die removeClass() -Methode auf und entfernt die Klasse "fa-minus" aus dem gleichen span-Element mit der Klasse "fa".

Und zuletzt, Zeile 5 ist im Grunde nur die Art und Weise zu schließen und beenden Sie die Jquery-Funktion, genau wie Sie mit jeder anderen Sprache. Jetzt sollten Sie in der Lage sein, den Rest des Codes zu lesen, den Sie haben und verstehen, was passiert. Ich habe mein Bestes versucht, dies auf die einfachste Art zu erklären, ohne technisch falsch zu klingen. Wenn ich es aber tat, ist jeder frei, mich zu korrigieren.