Question

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

点击除DIV本身之外的其他地方
点击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事件绑定到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');
});

Answer 2

编辑 How to create a custom modal popup - and how to close it clicking outside of it

~~这里只是我的一个例子：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/

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

3 个答案: