jQuery 实现点击非目标元素的实现隐藏方法

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/whosheng/article/details/83542957

在网页很多地方都能用到 点击document ，关闭已经存在的弹窗或者菜单，下面贴出stackoverflow一个非常简单的答案。

$(document).click(function(e){
  var _con = $('目标区域');   // 设置目标区域</span>
  if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1
    some code...   // 功能代码
  }
});
/* Mark 1 的原理：
判断点击事件发生在区域外的条件是：
1. 点击事件的对象不是目标区域本身
2. 事件对象同时也不是目标区域的子元素
*/

这个方法可以实现比较简单的场景。
比如特殊的场景或者复杂的html结构此方法就不是比较合适。
例如：
`在这里插入代码片

这里的清空就是点击“三点”（关闭开关）按钮是菜单上下拉动，同时点击下拉菜单以外的地方 菜单收起。
所以这里就可以利用，html机构加JS的结合方法来做比较合适。
HTML结构大致如下

<header>我是顶部导航
	<div>我是标题</div>
	<div id="toggle-nav">我是关闭按钮</div>
</header>

<div class="s-min-nav">
	我是遮罩 设置透明宽高100%；
<div>
	我是下拉菜单 可以做半透明效果 区分遮罩
</div>
</div>

JS结构如下

$(function(){
    $('#toggle-nav').on('click',function(){
            $(".s-min-nav").toggleClass("show-hide");
            //可以根据你的应用做不同的动作，此处只是例子
    })

    $('.s-min-nav').on('click','.min-nav-box',function(event){
        event.stopPropagation();   
        //此处排除掉遮罩里面下来菜单点击事件
    })

    $('.s-min-nav').on('click',function(){
            $(".s-min-nav").toggleClass("show-hide");
           //点击遮罩时候做出的隐藏动作，可以根据你的应用实际更改。
    })
})

运行后你会发现，点击header区域任何区域的时候，导航菜单也会隐藏，而我们只需要点击页面出关闭按钮和下拉菜单的地方执行隐藏。所以我们需要再header上做一些css修饰。
个header一个定位，设置z-index的值，这个值一定要比遮罩的值大就OK了。代码如下

header
{
position:relative; //根据你的应用可以设置不同的定位，如果固定导航，就用fixed。
z-index:9999999; //这个值要大于你的遮罩的值。
}

原理就这么简单。