jquery在点击外部时关闭答案

【问题标题】：jquery close on click outsidejquery在点击外部时关闭
【发布时间】：2013-05-22 12:01:08
【问题描述】：

我制作了一个侧边导航菜单，单击按钮即可从左向右滑动。

$(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  -->

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

【问题讨论】：

标签： jquery html click

【解决方案1】：

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

【讨论】：

如果我单击页面上的任何位置，它也会打开菜单。我将如何改变它？
我所做的也是将“body”更改为“#page”，因为当我点击导航时它也关闭了它。
我使用 HTML 代替 BODY，因为正文高度基于内容高度。

【解决方案2】：

简单...使用这里解释的代表： http://api.jquery.com/on/ "检查直接和委托事件"

基本上我说的是......当用户点击文档上的任意位置并且源不在#side-menu :not(#side-menu) 中删除类边距#nav-toggle

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

【讨论】：