jQuery: Fermez DIV en cliquant n'importe où en dehors de la DIV elle-même?

J'ai un div qui glisse vers le bas quand un bouton est cliqué, et je tiens à le glisser vers le haut le div lorsqu'un utilisateur:

  1. Clics anwhere sauf à l'intérieur de la DIV elle-même
  2. Cliquez sur un bouton de fermeture à l'intérieur de la div.

Actuellement, je l'ai à un stade où, vous cliquez sur un élément avec la classe .panel-tab - il glisse vers le bas du panneau avec l'ID #panel... cliquez n'importe où ailleurs, il glisse vers le haut....

Voici mon code si loin pour obtenir la DIV pour ouvrir et fermer:

<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>

source d'informationauteur CodeyMonkey

  1. 20

    Vous pouvez lier un click événement à la document et de vérifier si l'événement click de se passer à l'intérieur de cette div ou des enfants. Si pas, fermez-la.

    Plugin de temps!

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

    utilisation:

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

    MODIFIER Comment créer un personnalisé modale des pop - up et la façon de le fermer en cliquant sur l'extérieur

    Ici, juste un exemple de la mine: http://jsbin.com/uqiver/1/edit

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

    Ou vous pouvez aussi vérifier si il est visible au premier abord:

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

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

  3. 1

    je voudrais faire quelque chose comme ceci

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

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

    vous de toujours fermer l'onglet sur le clic de souris sur le document, mais vous vous arrêtez le cas de la propagation dans l'onglet auto.

    voici un exemple:
    http://jsfiddle.net/meo/TnG4E/