单击外部菜单关闭jquery

我一直在开发一个响应迅速的网站，在tablet上成为下拉菜单，但我需要当在文档外单击时，菜单关闭，（我还需要鼠标箭头变为正常形式）我找不到一种方法来实现这一点，以下是我一直使用的代码：

JQUERY

  $(function() {

    var btn_mobile = $('#nav-mobile'),
        menu = $('#menu').find('ul');

    btn_mobile.on('click', function (e) {
        e.preventDefault();
        e.stopPropagation();


        var el = $(this);

        el.toggleClass('nav-active');
        menu.toggleClass('open-menu');

    })

});

HTML

谢谢你的关注

查看jquery中的

悬停（in，out）

以更改鼠标光标，并使用

主体：not['#nav..]

选择器关闭菜单

悬停示例：

// Hover script
btn_mobile.hover(
    function () { 
        // {Hover in of the menu} 
        // change the mouse here
    }, 
    function () { // out
        // {Hover out of the menu} 
        // change the mouse here

    }
);

---

您可以在菜单后面使用一个透明层，覆盖整个页面（管理css z索引）

在该层上，您将添加一个单击事件处理程序，该处理程序将隐藏菜单并更改箭头和“display:none；”本身。选择时，菜单下拉菜单必须“显示：阻止”它

---

看看bootstrap如何使用其modals处理它：

您可以创建不可见的div，在打开菜单时填充整个文档。确保div的z索引小于菜单z索引。并将click handler添加到该分区。如果有人单击该分区，只需关闭菜单。可能会重复

#nav-mobile{
    display: none;
    background: url(../images/menu-icons.svg) no-repeat 42px -2px;
    float: right;
    width:75px;
    height:35px;
    padding-top:9px;
    position: absolute;
    right:0;
    top:0;
    font-weight:bold;

}

#nav-mobile.nav-active{opacity: 1; background: url(../images/menu-icons.svg) no-repeat 42px -48px;}

/* TABLET */
    #nav-mobile{display: block; }
    #menu{margin-top:0px;width: 100%;float: none;padding-top:55px;}
    #menu ul{
    max-height: 0;
    overflow: hidden;
    text-align:center;
    position:relative;
    z-index:500;
    transition: max-height .5s, box-shadow 1.2s, opacity 0.5s;
    opacity:0;
    margin:0 -3.2%;
    }
    #menu li{background:#fff;border-bottom: 1px solid #ececec;float: none;}
    #menu li a{padding: 12px 0;height: auto;width:100%; text-transform:uppercase;}
    #menu li a:hover{background:#fbfbfb;}
    #menu ul.open-menu{max-height: 400px;transition: max-height .5s, box-shadow 1.2s, opacity 0.5s; border-top: 1px solid  #CCC; box-shadow: 0px 9000px 0px 9000px rgba(0,0,0,0.15); opacity:1; }

// Hover script
btn_mobile.hover(
    function () { 
        // {Hover in of the menu} 
        // change the mouse here
    }, 
    function () { // out
        // {Hover out of the menu} 
        // change the mouse here

    }
);