首页 > 代码库 > 点击其他区域菜单消失
点击其他区域菜单消失
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gb2312" /> 5 <title></title> 6 <style> 7 span { 8 color:red; 9 }10 #test {11 display:none;12 position:absolute;13 left:30px; top:30px;14 width:200px;15 border:1px solid red;16 background:#fff;17 }18 </style>19 </head>20 <body>21 <span id="span">打开层</span>22 <div>1-1111111111</div>23 <div>1-1111111111</div>24 <div>1-1111111111</div>25 <div>1-1111111111</div>26 <div>1-1111111111</div>27 <div id="test">28 <a href="#">123</a>29 浮层，点击这个浮层以外的区域，都可以隐藏这个浮层30 <div>31 <script>32 function $(o){return document.getElementById(o)}33 $(‘span‘).onclick = function(e){34 $(‘test‘).style.display = ‘block‘;35 e = e || window.event;36 if (e.stopPropagation) {37 e.stopPropagation();38 } else {39 e.cancelBubble = true;40 }41 42 }43 var odiv = $(‘test‘);44 document.onclick = function(e){45 e = e || window.event;46 var s = e.target || e.srcElement;47 if( e.srcElement ){ //ie48 if( !(s == odiv || odiv.contains(s)) ){49 odiv.style.display = ‘none‘;50 }51 }else{52 var res = odiv.compareDocumentPosition(s); 53 if( !(s == odiv || res == 20 || res == 0) ){54 odiv.style.display = ‘none‘;55 }56 }57 58 } 59 60 61 </script> 62 </body>63 </html>
参考资料：
http://www.jb51.net/article/82847.htm
点击其他区域菜单消失
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。