Javascript jQuery：通过单击DIV本身之外的任意位置来关闭DIV？

单击按钮时，我有一个向下滑动的div，当用户：

单击除DIV本身之外的其他位置

单击div中的关闭按钮

目前，我已经把它放到了一个阶段，在这个阶段中，你用class

.panel选项卡单击一个元素，它用ID
#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>


$（文档）.ready（函数（）{
$（'.panel tab'）。单击（函数（e）{
$（“#面板”）。停止（对，对）。滑动切换（“慢”）；
e、 停止传播（）；
});
$（“正文”）。单击（函数（）{
$（“#面板：可见”）.stop（真，真）。slideUp（“慢”）；
});});
您可以将
单击事件绑定到
文档
，并检查单击事件是否发生在该
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');
});

编辑


这里是我的一个例子：

或您还可以先检查它是否可见：

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

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

我会这样做

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

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

您总是在单击文档时关闭选项卡，但您会阻止事件在选项卡上传播

下面是一个工作示例：
谢谢你的回复，抱歉，但使用你提供的两个部分的完整示例是什么？@CodeyMonkey：好吧，你只需将“第一部分”拉入
.js文件
，将其包含在你的网站上，并像我在“第二部分”中那样使用它。顺便说一句，这适用于所有类型的事件。@jAndy:为什么你不总是触发事件并停止在应该保持打开状态的元素上的传播？@meo:有几个原因。我想这样做最方便，也最容易使用和重复使用。但在大多数情况下，您还必须检查目标下的任何子节点。谢谢，这确实有效！感谢您抽出时间。@roXon：这主要是因为我在UNDBIND中输入了错别字（说德语是个问题；））。这只是一个例子。我知道它不会在每一种情况下都起作用：）但如果我认为它会对他的例子起作用。
var $doc, $panel = $('.panel-tab');
$doc = $(document);
$doc.bind("click", function(){
   $panel.hide();
   $doc.undbind("click");
});

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