jQuery：点击DIV本身以外的任何地方关闭DIV？

我有一个div，当点击一个按钮时滑下来，我想在用户时向上滑动div：

1. 点击除DIV内部以外的地方
2. 单击div中的关闭按钮。

目前我已经进入了一个阶段，你点击一个带有.panel-tab类的元素 – 它用ID #panel向下滑动面板…点击它滑动的任何地方….

到目前为止，这是我的代码，以便打开和关闭DIV：

  $(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"); });});  

Answer 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'); }); 

Answer 2

编辑 如何创建自定义模式弹出窗口 – 以及如何在其外部单击它关闭它

---

这里只是我的一个例子： 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(); }); 

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