jQuery: Zamknij DIV, klikając dowolne miejsce poza samym DIV?

Question

Mam div, który ześlizguje się po kliknięciu przycisku, i chciałbym, aby przesuwać się w górę div, gdy użytkownik:

1. kliknięcia anwhere wyjątkiem wewnątrz DIV samego
2. Kliknij przycisk zamykania w ramach div.

Obecnie mam go na scenie, gdzie, kliknij element z klasą .panel-tab - to ześlizguje się panel z ID #panel ... Kliknij gdziekolwiek indziej to ślizga się ....

Oto mój kod tak daleko, aby uzyskać DIV do otwierania i zamykania:

<script type="text/javascript"> 
$(document).ready(function(){ 

$('.panel-tab').click(function(e) { 
    $("#panel").stop(true, true).slideToggle("slow"); 
    e.stopPropagation(); 
}); 

$("body").click(function() { 
    $("#panel:visible").stop(true, true).slideUp("slow"); 
});}); 
</script> 

Answer 1

można powiązać zdarzenie click do document i sprawdzić, czy zdarzenie click wydarzyło w ciągu tego div lub dzieci. Jeśli nie, zamknij to.

Czas wtyczki!

(function($){ 
    $.fn.outside = function(ename, cb){ 
     return this.each(function(){ 
      var $this = $(this), 
       self = this; 

      $(document).bind(ename, function tempo(e){ 
       if(e.target !== self && !$.contains(self, e.target)){ 
        cb.apply(self, [e]); 
        if(!self.parentNode) $(document.body).unbind(ename, tempo); 
       } 
      }); 
     }); 
    }; 
}(jQuery)); 

Wykorzystanie:

$('.panel-tab').outside('click', function() { 
    $('#panel').stop(true, true).slideUp('slow'); 
}); 

Answer 2

EDITHow to create a custom modal popup - and how to close it clicking outside of it

---

tu tylko przykładem kopalni: http://jsbin.com/uqiver/1/edit

$("body").on('click', function(ev) { 
    var myID = ev.target.id; 
    if (myID !== 'panel') { 
     $('#panel').hide(); 
    } 
}); 

Albo można również sprawdzić, czy jest to widoczne na pierwszy:

var $pan = $('#panel'); 

$("body").on('click', function(ev) { 
    if ($pan.is(':visible') && ev.target.id !== 'panel') $pan.hide(); 
}); 

Answer 3

chciałbym zrobić coś takiego

var $doc, $panel = $('.panel-tab'); 
$doc = $(document); 
$doc.bind("click", function(){ 
    $panel.hide(); 
    $doc.undbind("click"); 
}); 

$panel.bind("click", function(e){ 
    e.stopPropagation(); 
}); 

zawsze zamknąć kartę na kliknięcie na dokumencie, ale zatrzymasz zdarzenie z propagacji na karcie samo.

tutaj przykład roboczych: http://jsfiddle.net/meo/TnG4E/