单击外部菜单以关闭jquery(Click outside menu to close jquery)

 我一直在一个响应式网站和平板电脑上成为下拉菜单，但我需要在菜单关闭时在文档之外进行点击，（我还需要鼠标箭头更改为正常形式）我不能找到一种方法，这是我一直在使用的代码： 
 
 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 
 
<nav id="menu"><a class="nav-mobile" id="nav-mobile" href="#">MENU</a>
<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="work.html">Work</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>
 
 
 PARTIAL CSS（平板电脑） 
 
#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; }
 
 感谢您的关注！！！。 

I've been working a responsive web site and on tablet become dropdown menu but I need that when a click is made outside of the document the menu closes, (also I need that the mouse arrow changes to it's normal form) I can't find a way to do this, here is the code I have been using:
 
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
 
<nav id="menu"><a class="nav-mobile" id="nav-mobile" href="#">MENU</a>
<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="work.html">Work</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>
 
 
PARTIAL CSS (tablet)
 
#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; }
 
thank you for your attention!!!.

原文：https://stackoverflow.com/questions/24049708