在空白处点击，实现隐藏div(下拉菜单或其它弹框)的方法

本文链接：https://blog.csdn.net/s915097991/article/details/51170305

一个小需求的实现，有时候我们点击网站页面的一个下拉菜单按钮，可能要再次点击那个按钮才能使下拉菜单消失，这里要实现的需求是在其他地方（除下拉菜单和按钮以外的地方）点击也要使下拉菜单消失，这样做可以提高用户体验度。

这里是实现的一个方案，当然方案很多，这里只介绍我用的一种。我们知道前端静态页面的实现最基本的就是DOM树，我们的方案也是基于查询DOM节点的。下拉菜单出现后，我们再次点击的时候，首先获取当前点击元素，然后依次为起点向树根查找，查找过程中若遇到当前下拉菜单节点或者当前按钮节点则停止查找，因为此时点击的为下拉菜单或按钮的子节点，我们不做任何操作，若查找过程中没有遇到当前下拉菜单节点或者当前按钮节点则调用隐藏下拉菜单的程序。下面上程序看一下就一目了然了。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>点击实验</title>
<script  type="text/javascript"   src="js/jquery-2.1.1.js"></script>
</head>
<body>
  <table>
    <tr>
      <td id="first" οnclick="a();"> 首页      </td>  
      <td> 内容    </td> 
      <td> 技术支持 </td> 
      <td> 联系我们</td>
    </tr>
  </table>

  <div id="phone" value="divm"  >
     <table>
       <tr> 
           <td> 低端  </td>
       </tr>
       
       <tr> 
           <td> 中端  </td>
       </tr>
       
       <tr> 
           <td> 高端  </td>
       </tr>
     </table>
  </div>
 
  <script type="text/javascript">

    $(function b(){
    	$("#phone").hide();
    }); 
  
    function a(){
      var mDiv=$("#phone").attr("value");
      if($("#phone").attr("value")=="divm"){
    	  $("#phone").show();
    	  $("#phone").attr("value","divm2");
      }else{
    	  $("#phone").hide();
    	  $("#phone").attr("value","divm");
      }
       
    }

    $(document).bind("click",function(e){
    	var target  = $(e.target);    //e.target获取触发事件的元素
    	
    	/**以target为起点向上查找父（祖）元素，若父（祖）元素中包含#phone,#first中一个就不执行if中语句，即长度不为0
    	 **.closest()沿 DOM 树向上遍历(以数组形式入参)，直到找到已应用选择器的一个匹配为止，返回包含零个或一个元素的 jQuery 对象。
    	 **/
    	if(target.closest("#phone,#first").length == 0){
    	//进入if则表明点击的不是#phone,#first元素中的一个
    		$("#phone").hide();
    	    $("#phone").attr("value","divm");
    	};

    	e.stopPropagation();
    })

  </script>
</body>
</html>

这里页面写的比较LOW，只为测试使用。另外程序中引入了jquery框架，要自己导入jquery文件包。该程序简单的实现了所述需求，当然实现该需求的方案很多，若有其它方案或建议的同学可留言交流。