切换隐藏不沃金

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但它不工作，当我点击按钮，我知道porblem是，你点击两次点击。 但如何解决

Answer 1

您可以防止冒泡的DOM click事件，并与.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>

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; 
})