网友回复
通过监听document对象遍历所有的dom元素,发现点击的不是菜单对象时隐藏,代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <title>BFW NEW PAGE</title> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script> <style> #dropmenu{ width: 100px; display: none; position: absolute; padding: 10px 0; top:30px; left: 0; margin: 0; list-style: none; text-align: center; background: white; z-index: 111; box-shadow: 0 15px 30px #e5e5e5; font-size: 14px; } #dropmenu li{ padding: 1px 10px; height: 42px; } #dropmenu li:hover{ background:#e5e5e5 ; } #dmenu{ width: 100px; cursor: pointer; } .menubar{ position: relative; } </style> </head> <body> <div class="menubar" id="dmenu"> 下拉菜单<img width="15" src='//repo.bfw.wiki/bfwrepo/icon/5eb4949404188.png' /> <ul id="dropmenu"> <li> <a>菜单一</a> </li> <li> <a>菜单二</a> </li> <li> <a>菜单三</a> </li> <li> <a>菜单四</a> </li> </ul> </div> <script> $(function(){ $("#dmenu").click(function(){ $("#dropmenu").show(); }); $(document).bind("click",function(e){ var e = e || window.event; //事件对象,兼容IE var target = e.target || e.srcElement; //源对象,兼容火狐和IE while(target){ if (target.id && target.id == "dmenu"){ //循环判断至根节点,防止点击的是#dmenu和它的子元素 return; } target = target.parentNode; } $("#dropmenu").hide(); //点击的不是#dmenu和它的子元素,隐藏下拉菜单 }) }); </script> </body> </html>