javascript - 正文:not(div.class)不起作用

我对jQuery有问题，我做了一个按钮来打开/关闭菜单，它可以正常工作。但我想允许单击身体上的任何位置以关闭菜单。因此，当我们在.burger之外单击时，我想关闭菜单。

所以我做了这个：

编辑：这是我菜单的所有代码

var count = 0;
function menu(){
$('.burger').click(function(){
  if (count==0) {
    $('.navigation').css({'display':'block', 'opacity':'1'});
    count=1;
  }else{
    $('.navigation').css({'display':'none', 'opacity':'0'});
    count=0;
  }
  });
}
menu();

if(count == 1){
 $("body *:not(.burger)").click(function(event){
$('.navigation').css({'display':'none', 'opacity':'0'});
count=0;
});
}

但是，当我单击.burger时，它会显示警报。
 这样，当我点击.burger时，菜单就会出现并消失，但是当我点击.burger之外时，菜单将无法工作

最佳答案

与其对所有非汉堡包都设置绑定，我将使用委托事件绑定来过滤掉冒泡的事件。

$('.burger').on('click', function(e){
  e.stopPropagation();

  $('#menu').toggleClass('hide');
});

$(document.body).on('click', ':not(.burger)', function(e){
  $('#menu').addClass('hide');
});

.burger {
  display: inline-block;
  background-color:lightblue;
}

.hide {
  opacity: 0;
}

body {
  background-color: gray;
  min-width: 1920px;
  min-height: 1080px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="burger">Burger icon</div>
  <ul id="menu" class="hide">
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
  </ul>
</div>