クリックしたときにメニューがスペーシング（マージン）を切り替える

Question

私のコードがなぜ必要としないのでしょうか？私がそれをクリックすると、最初の2回、モバイルナビがトグルされたときにうまく動作しますが、3回目には余裕ができません。

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"); 
    }); 
}); 

Answer 1

#site-navigation.main-navigationに「.toggle」クラスがある場合、2つのイベントが同時に発生しています。それはあなたが意図したものではありません。このコードはあなたが望むことをします。

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"); 
     } 
    }); 
}); 

Answer 2

CSSクラスを切り替えます。

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

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

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