當點擊div的外部時，toggle-隱藏項

我正在使用jquery的slidetoggle，想要了解如何在DIV之外的任何地方單擊時使showup類隱藏。謝謝！當點擊div的外部時，toggle-隱藏項

在線示例：從.showup區域內http://jsfiddle.net/evGd6/

<div class="click">click me</div> 
<div class="showup">something I want to show</div>

$(document).ready(function(){ 
    $('.click').click(function(){ 
     $(".showup").slideToggle("fast"); 
    }); 
});

.showup { 
    width: 100px; 
    height: 100px; 
    background: red; 
    display:none; 
} 
.click { 
    cursor: pointer; 
}

2012-12-12 olo

停止事件傳播：

$(document).on("click", function() { 
    $(".showup").hide(); 
});

然後防止這些點擊上.showup向上冒泡至document：

$(".showup").on("click", function (event) { 
    event.stopPropagation(); 
});

任何達到document的點擊事件都會導致隱藏.showup元素。從.showup開始的任何點擊事件都將被阻止繼續在DOM樹上繼續，因此永遠不會到達document。

您還需要從旅行到document以及停止對您的按鈕任何點擊：

$(".click").on("click", function (event) { 
    event.stopPropagation(); 
    $(".showup").slideToggle("fast"); 
});

否則即點擊事件會和氣泡到document立即導致.showup隱藏。

2012-12-12 00:58:02 Sampson

回答