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(); 
        }
    });
});

Updated fiddle