Question

我制作了一个侧面导航菜单，点击一个按钮就可以从左向右滑动。

$(document).ready(function(){
  $("#nav-toggle").click(function(){
    $("#page").toggleClass("margin");
  });
});

当点击'＃nav-toggle'按钮时，'＃page'边距从0px增加到600px。

    .margin {
margin-left:600px;width:380px;overflow-x:hidden
}


<div id="side-menu">

<nav>
    <a class="nav-links" href="#home">home</a>
    <a class="nav-links" href="#about">about</a>
    <a class="nav-links" href="#contact">contact</a>
</nav><!-- end of nav  -->

如何通过点击菜单外部来关闭菜单。

Answer 1

$('body').on('click',function(event){
   if(!$(event.target).is('#nav-toggle')){
     $("#page").removeClass("margin");
   }
});

Answer 2

简单...使用代表解释： http://api.jquery.com/on/“检查直接和委派活动”

基本上我所说的是...当用户点击文档中的任何位置并且源不在＃side-menu ：not（＃side-menu）中时，删除类边距＃nav-toggle

$(document).on({
   click: function(){
      $("#nav-toggle").removeClass("margin")
   }
},":not(#side-menu)");

jquery关闭点击外面

2 个答案: