Question

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

$('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()触发父级点击事件来停止：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

在Jquery下面使用该问题。

    $('.container, button').click(function(){
      $('.div').toggle(500);
      return false;
    })

Answer 3

请试试这个

$('div, button').click(function(){
  $('.div').toggle('hide');
  console.log("hello");
  return false;
})

切换隐藏不是woking

3 个答案: