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

问题描述：

任何想法为什么我的代码不会按要求工作？如果我在移动导航切换的前两次单击它，它可以正常工作，但是第三次它不会按照我的意愿添加边距。菜单切换添加间距（边距）如果点击

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

1）您需要包括HTML任何人能够调试。 2）您的代码片段没有正确格式化为StackOverflow - 您需要单独将JavaScript和HTML添加到代码片段编辑器的不同部分，以便它们可以自动运行。 –

另外，你没有正确地关闭第一个点击功能...... – Gabplay

我觉得这样的逻辑是有问题的，因为它在页面加载时根据它们的初始状态定义元素的绑定。从主导航元素中添加/删除“触发”类不会导致它开始使用其他绑定。它只会使用放置在其上的绑定。通过使用委托绑定可以完成直接绑定的这种简短功能。 – Taplar

答

当两个事件同时发生时，#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"); 
     } 
    }); 
});

在这种情况下，它并不重要，事件监听器的顺序使其工作，因为它应该，必须有其他问题，也许与我们可以告诉更多的HTML – Joint

答

切换CSS类。

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

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

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

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

相关推荐