JQuery: Закрыть DIV, щелкнув в любом месте отдельно от самого DIV?

У меня есть div, который скользит вниз, когда нажимается кнопка, и я хотел бы сдвинуть div, когда пользователь:

Щелкнет по адресу, кроме самого DIV
Нажмите кнопку закрытия в div.

В настоящее время я попал на сцену, где вы нажимаете элемент с классом .panel-tab - он скользит по панели с идентификатором #panel... щелчок в любом месте, где он соскальзывает....

Вот мой код, чтобы открыть и закрыть DIV:

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

Ответы

Ответ 1

Вы можете связать событие click с document и проверить, произошло ли событие click внутри этого div или любых дочерних элементов. Если нет, закройте его.

Время плагина!

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

Использование

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

Ответ 2

EDIT Как создать настраиваемое модальное всплывающее окно и как закрыть его нажатие за пределами него

~~Вот мой пример: http://jsbin.com/uqiver/1/edit~~

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

Или вы также можете проверить, видимо ли оно сначала:

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

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

Ответ 3

я сделал бы что-то вроде этого

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

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

вы всегда закрываете вкладку при щелчке по документу, но вы останавливаете событие от распространения на вкладке.

здесь рабочий пример: http://jsfiddle.net/meo/TnG4E/