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”类时，您的两个事件同时触发。这不是你想要的。这段代码可以满足您的需求。

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类。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: