Javascript 单击页面中的任意位置时隐藏侧边栏

我有一个动画边栏，当用户点击汉堡按钮时会出现。 结构如下：

$（“#导航切换”）。单击（函数（）{
if（$（'#导航切换'）.hasClass（'active'））{
$（'.menu'）。设置动画({
右：“0px”
}, 200);
}否则{
$（'.menu'）。设置动画({
右：“-285px”
}, 200);
}
});
菜单{
右：-285px；
身高：100%；
位置：固定；
宽度：285px；
z指数：1；
背景色：#111111；
}
.菜单ul{
边框顶部：1px实心#636366；
列表样式：无；
保证金：0；
填充：0；
}
李先生{
边框底部：1px实心#636366；
字体系列：“开放式Sans”，无衬线；
线高：45px；
垫底：3件；
左侧填充：20px；
垫面：3件；
}
.菜单李a{
颜色：白色；
}







您可以在页面中添加一个父节，并附加一个单击事件，就像您使用#导航切换所做的一样，类似这样的操作

$('.parent-section').click(function() {
 if($('#nav-toggle').hasClass('active')){
  $('.menu').animate({
   right: "0px"
  }, 200);
 } else {
  $('.menu').animate({
   right: "-285px"
  }, 200);
 }

});

或者您可以直接将其添加到body标签中，如果您打算使用此选项，我建议使用“部分而非body”，希望这将对您有所帮助：）
尝试此选项，它将始终隐藏用户对body的单击

$(document).on('click',function(){
     if($("#nav-toggle").hasClass("active")){
          $('.menu').animate({ right: "-100%" }, 200);
      }
});

我建议使用该方法，并通过在
菜单中添加
过渡：.2s
来设置动画，
工作示例：


$（“#导航切换”）。单击（功能（e）{
e、 停止传播（）；
$（“.menu”）.toggleClass（'bar'）
});
$（'body'）。单击（函数（e）{
if（$（'.menu'）.hasClass（'bar'））{
$（“.menu”）.toggleClass（'bar'）
}
})
菜单{
右：-285px；
身高：100%；
位置：固定；
宽度：285px；
z指数：1；
背景色：#111111；
转换：.2s
}
.菜单ul{
边框顶部：1px实心#636366；
列表样式：无；
保证金：0；
填充：0；
}
李先生{
边框底部：1px实心#636366；
字体系列：“开放式Sans”，无衬线；
线高：45px；
垫底：3件；
左侧填充：20px；
垫面：3件；
}
.菜单李a{
颜色：白色；
}
.酒吧{
右：0px；
}
身体，
html{
身高：100%；
宽度：100%；
}

点击我






我稍微编辑了一下您的代码：

这是：

$('#nav-toggle').click(function(e) {
    e.stopPropagation();
$('.menu').animate({right: "0px"}, 200);});
$(document).click(function(e){$('.menu').animate({right: "-285px"}, 200);});

补充了金托克的答案

$('#nav-toggle').on('click', function(e) {

  e.stopPropagation();

  $(".menu").toggleClass('bar');

  $('body').one('click', function(e) {

   if ($('.menu').hasClass('bar')) {
     $(".menu").toggleClass('bar')
   }

  });

});

这只会将侦听器从主体中移除，所以它不会每次都执行

实际上，我不确定什么对性能更有利，但我不喜欢每次点击网站都会出现“如果（hasClass）”
谢谢你的建议，我可以同时做这两件事吗？点击事件#导航切换和身体？谢谢你们的例子，它和良好的行为完美配合！谢谢！：）