przełącz - ukryj element, gdy klikniesz poza div

Question

Używam slidetoggle jquery, chcę dowiedzieć się, jak ukryć klasę showup po kliknięciu w dowolnym miejscu poza DIV. dzięki!

SAMPLE 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

propagacja wydarzenie Zatrzymaj W obszarze .showup:

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

Następnie zapobiec tych kliknięć .showup z pęcherzyków do document:

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

Każde zdarzenie click że osiągnie document spowoduje elementu .showup ukryty. Wszelkie zdarzenia kliknięcia, które rozpoczynają się od .showup, będą uniemożliwione dalsze przechodzenie do drzewa DOM, a zatem nigdy nie dotrą do document.

Potrzebny będzie również zatrzymać żadnych kliknięć na swoim przycisku z podróży do document także:

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

przeciwnym razie zdarzenie kliknięcie bańka do document i doprowadzić do ukrycia .showup natychmiast.

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