Menü toggle add spacing (margin) wenn geklickt

Irgendeine Idee, warum mein Code nicht wie gewünscht funktioniert? Wenn ich die ersten beiden Male klicke, wenn das mobile Navi umgeschaltet wird, funktioniert es gut, aber beim dritten Mal fügt es nicht den Rand hinzu, wie ich es möchte.Menü toggle add spacing (margin) wenn geklickt

jQuery(document).ready(function($){ 
    $("#site-navigation.main-navigation").click(function(){ 
    $("#page").css("margin-top", "285px"); 
    }); 

    $("#site-navigation.main-navigation.toggled").click(function(){ 
    $("#page").css("margin-top", "0px"); 
    }); 
});

Quelle

2017-10-12 altos

1) Sie müssen den HTML-Code für jedermann schließen, zu debuggen zu können. 2) Ihr Code-Snippet ist nicht korrekt für StackOverflow formatiert. Sie müssen Javascript und HTML separat in verschiedene Teile des Snippet-Editors einfügen, damit sie automatisch ausgeführt werden können. –

Auch schließen Sie nicht die erste Klickfunktion richtig ... – Gabplay

Ich fühle mich wie diese Logik, wie es ist, wird ein Problem haben, da es Bindungen auf Elementen basierend auf ihrem anfänglichen Zustand beim Laden der Seite definiert. Das Hinzufügen/Entfernen der "getoggelt" -Klasse aus dem Hauptnavigationselement bewirkt nicht, dass sie die andere Bindung verwendet. Es wird immer nur die Bindungen verwenden, die darauf platziert sind. Dieses kurze Kommen von Direktbindungen kann durch Verwendung einer Delegatenbindung überwunden werden. – Taplar

Ihre zwei Ereignisse zur gleichen Zeit feuern, wenn #site-navigation.main-navigation die „.toggle“ Klasse. Das haben Sie nicht beabsichtigt. Dieser Code wird tun, was Sie wollen.

jQuery(document).ready(function($){ 
    $("#site-navigation.main-navigation").click(function(){ 
     if ($(this).hasClass('toggled')) { 
      $("#page").css("margin-top", "0px"); 
     } else { 
      $("#page").css("margin-top", "285px"); 
     } 
    }); 
});

Quelle

2017-10-12 20:53:53

In diesem Fall spielt es keine Rolle, die Reihenfolge der Ereignis-Listener macht es so, wie es sollte, es muss ein anderes Problem geben, vielleicht könnten wir mit HTML mehr erzählen – Joint

Schalten Sie eine CSS-Klasse um.

document.getElementById("foo").addEventListener("click", function(e) { 
 
    this.classList.toggle("bump-it"); 
 
});

.bump-it{ 
 
    margin-left:24px; 
 
}

<button id="foo"> 
 
click me 
 
</button>

Quelle

2017-10-12 22:19:22

Menü toggle add spacing (margin) wenn geklickt

Antwort

Verwandte Themen