Attiva/disattiva l'elemento quando fai clic all'esterno del div

Question

Sto utilizzando lo slidetoggle di jquery, voglio imparare come rendere la classe showup nascondi quando fai clic ovunque al di fuori del DIV. grazie!

CAMPIONE online: 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; 
} 
    ​ 

Answer 1

arresto propagazione degli eventi dall'interno dell'area .showup:

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

Poi evitare i clic sul .showup da zampillante per la document:

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

Qualsiasi evento click che raggiunge document comporterà la nascosta dell'elemento .showup. A tutti gli eventi di clic che iniziano da .showup verrà impedito di procedere ulteriormente nell'albero DOM, e quindi non arriveranno mai allo document.

Sarà inoltre necessario per fermare eventuali clic sul tuo pulsante di viaggiare fino alla document così:

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

Altrimenti quell'evento click bolla fino al document e comportare l'occultamento di .showup immediatamente.

Demo: http://jsfiddle.net/evGd6/2/