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的所有正文标记。这只会选择正文标记（因为它不匹配div.burger）。

要匹配正文中没有标记.burger的所有元素，请尝试以下方法：

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

同样，如果您想匹配没有课程.burger的 ONLY DIVS ，请使用div:not(.burger)（您甚至不需要身体这里，因为div不应出现在＆lt; body＆gt;标记之外：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

.burger {
  display: inline-block;
  background-color:lightblue;
}

.hide {
  opacity: 0;
}

body {
  background-color: gray;
  min-width: 1920px;
  min-height: 1080px;
}

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

Answer 3

使用功能.not()，您可以完成此操作。

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

.burger {
  width: 200px;
  height: 200px;
  background-color: rgba(255,255,255, 1);
  position: absolute;
  top: 25px;
  left: 30px;
  z-index: 9999;
}

.body {
  width: 100%;
  height: 100%;
}

.nav {
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0, .2);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body">

<div class='burger'>
  Burger div (Click and nothing happend)
</div>
<br><br><br>
<div class="nav">
  
  Click this overlay div to hide it!
</div>
</div>

希望有所帮助！

body：not（div.class）不起作用

3 个答案: