如果单击，菜单切换添加间距（边距）

Question

知道为什么我的代码不能按预期工作吗？如果我在切换移动导航时点击它前两次它工作正常但第三次它没有按我想要的那样添加边距。

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”class 时，您的两个事件同时触发。那不是你想要的。此代码将执行您想要的操作。

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 class.

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

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

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

如果单击，菜单切换添加间距（边距）

Menu toggle add spacing (margin) if clicked

css

jquery

margin

spacing