如何使用Jquery在文档按下上滑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在文档按下上滑Div。感谢

Answer 1

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

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

Updated fiddle

Answer 2

这里有一些代码，你需要使用jQuery来滑动文档Div上的Div。

解决方案： Demo

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

Answer 3

将click事件添加到diocumnet

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