javascript - 如何使用 Jquery 在 Document Press 上向上滑动 Div

Question

HTML：

<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>

风格

#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}

jQuery

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});

这是演示：http: //jsfiddle.net/JkQR2/

你好。如何使用 Jquery 在 Document Press 上向上滑动 Div。谢谢

Answer 1

添加一个文档点击事件处理程序并检查事件目标不是#flip：

$(document).ready(function(){
    $("#flip").click(function(){
      $("#panel").slideToggle("slow");
    });
    $(document).click(function(e) {
        if(!$(e.target).is("#flip")) {
           $("#panel").slideUp(); 
        }
    });
});

更新的小提琴

Answer 2

这是您需要使用 jQuery 在 Document Press 上滑动 Div 所需的一些代码。

解决方案： 演示

     $(document).ready(function(){
         $("#flip").click(function(){
             $("#panel").slideToggle("slow");
         });
        $(document).click(function(event) {
            if(!$(event.target).is("#flip")) {
                $("#panel").slideUp(); 
            }
        });
     });

Answer 3

将点击事件添加到 diocumnet

$(document).ready(function(){
   $(document).click(function(){
     $("#panel").slideToggle("slow");
   });
});