javascript - jQuery:通过单击 DIV 本身以外的任何地方来关闭 DIV？

Question

我有一个 div，它会在单击按钮时向下滑动，我想在用户执行以下操作时向上滑动该 div:

1. 在 DIV 本身以外的任何地方单击
2. 单击 div 中的关闭按钮。

目前我已经达到了这样一个阶段:您单击一个类为 .panel-tab 的元素 - 它会沿着 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>

Answer 1

您可以将 click 事件绑定(bind)到 document 并检查点击事件是否发生在该 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');
});