JavaScript实现点击其他地方收起菜单

前言：今天想弄一个，点击菜单之外的地方就收起菜单的功能，第一时间就想到了建一个占屏幕100%的透明遮罩div垫在菜单下面，然后点击菜单之外的地方（也就是遮罩div），就收起遮罩和菜单。But，这样做会导致菜单在展开的时候，无法点击在菜单之外的功能按钮（因为遮罩在最上面仅次于展开的菜单），所以一点击在菜单之外的功能按钮都会点到遮罩上面，要再点一次才能点到需要的功能按钮，毫无用户体验感。

所以就想到了，通过点击事件源对象判断被点击的对象其祖先元素或者其本身是否为这个展开的菜单，如果其祖先元素和其本身不是这个展开的菜单就收起展开的菜单。

效果图如下：

实现代码如下：

//添加全文档的点击事件监听
    document.addEventListener("click", clickHidden);
    function clickHidden(eve) {
        // 将点击事件源对象转为Jquery对象
        var $target = $(eve.target);
        //获取点击事件源对象的所有ID为menuList的祖先元素，返回长度小于等于0则代表不是#menuList的子元素，则不是主菜单的子元素
        //如果点击的不是#menuList的子元素，也不是其本身，也不是菜单按钮的话就隐藏菜单
        if ($target.parents("#menuList").length <= 0 && $target.attr('id') != "mainMenuBtn" && $target.attr('id') !=
            "menuList") {
            $("#menuList").css("display", "none");
        }
    }

备注:

1. eve.target为点击事件源对象
2. $target.attr('id') != "mainMenuBtn"这个判断是为了避免菜单在展开的时候就被收起了
3. jQuery获取元素的祖先元素：

$("selector").parents("filter");
//parents() 方法返回被选元素的所有祖先元素。
//filter规定缩小搜索祖先元素范围的选择器表达式。
//注意：如需返回多个祖先，请使用逗号分隔每个表达式。

如文章表述有不足之处还请斧正，如果有更好的实现方法请大佬留言一下

本文章为本博客原创，转载请标明来源于本站，谢谢