javascript - body :not(div. 类)不起作用

Question

我有一个 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 之外时，菜单不起作用

Answer 1

您正在选择与 div.burger 不匹配的所有正文标记。这将简单地选择 body 标记(因为它与 div.burger 不匹配)。

要匹配正文中没有标签 .burger 的所有元素，请尝试以下操作:

$("body *:not(.burger)").click(function(){alert('ok');
    $('.nav').css({"display":"none"});
});

同样，如果您想匹配没有 .burger 类的 ONLY DIVS，请使用 div:not(.burger) (这里甚至不需要 body，因为 div 不应该出现在 标记之外):

$("body *:not(.burger)").click(function(){
    alert('matched body *:not(.burger)');
});

$("div:not(.burger)").click(function(){
    alert('matched div:not(.burger)');
});

div
{
    width: 50px;
    height: 50px;
    float: left;
    background-color: orange;
    margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="burger">Burger</div>
<div>Not a burger</div>