javascript - 切换隐藏不起作用

Question

我有一个简单的代码，如果用户点击此 div 内的其他 div.container 或 button，我想隐藏一个 div这是我的代码

$('div, button').click(function(){
  $('.div').toggle('hide');
})

div{
  height: 200px;
  width: 200px;
}
.container{
  background: pink
}
.div{
  background: blue
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button>Click</button>
</div>
<div class="div"></div>

当我点击 container div 时它工作正常但是当我点击按钮时它不工作，我知道问题是你点击了两次。但如何解决这个问题

Answer 1

您可以通过阻止点击事件冒泡 DOM 并使用 .stopPropagation() 在父级上触发点击事件来阻止它。 :

$('div, button').click(function(e){
  e.stopPropagation();
  $('.div').toggle('hide');
})

div{
  height: 200px;
  width: 200px;
}
.container{
  background: pink
}
.div{
  background: blue
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button>Click</button>
</div>
<div class="div"></div>