代码
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0px auto; padding: 0px; } #btnshow{ margin: 100px auto; width: 90px; display: block; } #divTop{ width: 400px; height: 200px; position: absolute; margin-top: -100px; margin-left: -200px; border: 1px solid gray; color:#333333; top:50%; left: 50%; background: #efefef; } </style> </head> <body> <input type="button" value="点击" id="btnshow"/> <div id="divTop"> 点击空白隐藏层!!! </div> <script src="jquery-1.8.3.js"></script> <script> $(function(){ $('#btnshow').click(function(event){ //取消事件冒泡 event.stopPropagation(); //按钮的toggle,如果div是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可见的。 $('#divTop').toggle('slow'); return false; }); //按钮的toggle,如果div是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可见的。 $(document).click(function(event){ var _con=$('#divTop');//设置目标区域 if(!_con.is(event.target) &&_con.has(event.target).length===0){ $('#divTop').slideUp('slow');//滑动消失 // $('#divTop').hide(1000);//淡出消失 } }) }) </script> </body> </html>