Javascript body: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之外单击时，没有任何效果

您正在选择所有与

div.burger

不匹配的身体标签。这将简单地选择body标签（因为它不匹配

div.burger

）

要匹配body中没有标记

.burger

的所有元素，请尝试以下操作：

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

同样，如果只想匹配没有类

.burger

的div，请使用

div:not（.burger）

（这里甚至不需要body，因为div不应该出现在标记之外）：

$（“body*：not（.burger）”）。单击（function（）{
警报（“匹配体*：非（.burger）”；
});
$（“div:not（.burger）”）。单击（function（）{
警报（“匹配的div:not（.burger）”；
});
div
{
宽度：50px；
高度：50px；
浮动：左；
背景颜色：橙色；
保证金：5px；
}

汉堡
不是汉堡
您选择的所有身体标签都与
div.burger
不匹配。这将简单地选择body标签（因为它不匹配
div.burger
）

要匹配body中没有标记
.burger
的所有元素，请尝试以下操作：

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

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


$（“body*：not（.burger）”）。单击（function（）{
警报（“匹配体*：非（.burger）”；
});
$（“div:not（.burger）”）。单击（function（）{
警报（“匹配的div:not（.burger）”；
});
div
{
宽度：50px；
高度：50px；
浮动：左；
背景颜色：橙色；
保证金：5px；
}

汉堡
不是汉堡
我将使用委托事件绑定来过滤冒泡的事件，而不是对不是汉堡的所有内容进行绑定


$（'.burger'）。在（'click'，函数（e）上{
e、 停止传播（）；
$（“#菜单”）.toggleClass（'hide'）；
});
$（document.body）。在（'click'，'：not（.burger'）上，函数（e）{
$（'#menu'）.addClass（'hide'）；
});
.burger{
显示：内联块；
背景颜色：浅蓝色；
}
.隐藏{
不透明度：0；
}
身体{
背景颜色：灰色；
最小宽度：1920像素；
最小高度：1080px；
}

汉堡图标

菜单1
菜单2
菜单3

我将使用委托事件绑定来过滤冒泡的事件，而不是对所有不是汉堡的东西进行绑定


$（'.burger'）。在（'click'，函数（e）上{
e、 停止传播（）；
$（“#菜单”）.toggleClass（'hide'）；
});
$（document.body）。在（'click'，'：not（.burger'）上，函数（e）{
$（'#menu'）.addClass（'hide'）；
});
.burger{
显示：内联块；
背景颜色：浅蓝色；
}
.隐藏{
不透明度：0；
}
身体{
背景颜色：灰色；
最小宽度：1920像素；
最小高度：1080px；
}

汉堡图标

菜单1
菜单2
菜单3

使用函数，您可以实现这一点。


$（“.body*”）。不是（“div.burger”）。单击（函数（）{
$（'.nav'）.css（{“display”：“none”}）；
});
.burger{
宽度：200px；
高度：200px；
背景色：rgba（255255,1）；
位置：绝对位置；
顶部：25px；
左：30px；
z指数：9999；
}
.身体{
宽度：100%；
身高：100%；
}
.导航{
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,2）；
位置：绝对位置；
排名：0；
左：0；
z指数：999；
}

汉堡店（点一下什么都没发生）




单击此覆盖div以隐藏它！
使用函数，您可以实现这一点。


$（“.body*”）。不是（“div.burger”）。单击（函数（）{
$（'.nav'）.css（{“display”：“none”}）；
});
.burger{
宽度：200px；
高度：200px；
背景色：rgba（255255,1）；
位置：绝对位置；
顶部：25px；
左：30px；
z指数：9999；
}
.身体{
宽度：100%；
身高：100%；
}
.导航{
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,2）；
位置：绝对位置；
排名：0；
左：0；
z指数：999；
}

汉堡店（点一下什么都没发生）




单击此覆盖div以隐藏它！
另一个选项是使用jQuery的
.not（）
：
$（“body*”）。not（“div.burger”）
谢谢，但没有解决方案有效。。第一，当我点击时，做完全相同的事情。burger我有警报，第二个工作，但我所有的div都有宽度：90%和边距：auto，所以当我点击div时，它不工作。not（）：$（“body*”）。not（“div.burger”））与第一个结果相同solution@CoraLie您在
$（'.nav
。请确保已将其包含在源代码中。代码段中的代码清楚地显示了这些选择器的工作方式。您的源代码中可能存在另一个问题，我无法调试，因为您需要发布更多信息。好的，这是我的所有源代码变量计数=0；函数菜单（）{$（'.burger'）。单击（函数（）{if（count==0）{$（'.nav'）.css（{'display'：'block'，'opacity'：'1'}）；count=1；}else{$（'.nav'）.css（{'display'：'none'，'opacity'：'0'}）；count=0；}菜单（）；if（count==1）{$（'body*：not（.burger）”。点击（函数（事件）{$（'nav'）.css（{'display'：'none'，'opacacity'：'0'}）；count=0；}）；}像这样，我的菜单