网友回复
使用closest方法。
closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 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> <script> $(function(){ $("#menu").hide(); $("#open").bind("click",function(e){ open(); }); $(document).bind("click",function(e){ //id为menu的是菜单,id为open的是打开菜单的按钮 if($(e.target).closest("#menu").length == 0 && $(e.target).closest("#open").length == 0){ //点击id为menu之外且id不是不是open,则触发 close(); } }) }) function close(){ $("#menu").hide(); //close menu... } function open(){ $("#menu").show(); //open menu... } </script> <style> body{ background-color: #E6E6E6; } #open{ width: 100px; text-align: center; height: 30px; background: white; box-shadow: 0 2px 4px 0 rgb(0 0 0 / 5%); } #menu ul{ list-style: none; padding: 0; margin: 0; } #menu ul li{ text-align: center; padding: 5px; } #menu{ width: 100px; position: absolute; top: 30px; background: white; box-shadow: 0 2px 4px 0 rgb(0 0 0 / 5%); } </style> </head> <body> <div id="open">open</div> <div id="menu"> <ul> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> </ul> </div> </body> </html>