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>