切換隱藏不沃金

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