jQuery:触发关闭移动导航菜单

我有一个非常基本的jQuery点击功能，可以切换移动导航菜单的显示——汉堡风格，由媒体查询触发——如下所示：

// mobile menu click function
$(".mobile-nav-toggle").click(function () {
    $(".mobile-nav-menu").slideToggle();
});

因此，单击

.mobile nav toggle

div将触发位于主标题栏下的

.mobile nav菜单的出现。我的问题是——有没有一种简单的方法通过jQuery触发关闭/隐藏菜单，方法是单击/点击菜单本身之外的任何地方？目前，只能通过重新单击/点击切换按钮来关闭菜单

感谢您在此提供的见解。
您可以将一个单击处理程序添加到文档中，如


//移动菜单点击功能
$（“.mobile nav toggle”）。单击（函数（）{
$（“.mobile nav menu”）.slideToggle（）；
});
$（文档）。单击（函数（e）{
//如果在移动导航菜单或移动导航切换中发生单击，则忽略它
如果（！$（e.target）.closest（'.mobile导航菜单，.mobile导航切换'）.length）{
$（“.mobile nav menu”）.slideUp（）；
}
})
正文{
最小高度：100px；
背景颜色：浅灰色；
}
.移动导航菜单{
显示：无；
}

切换
菜单
您可以将单击处理程序添加到文档本身，如


//移动菜单点击功能
$（“.mobile nav toggle”）。单击（函数（）{
$（“.mobile nav menu”）.slideToggle（）；
});
$（文档）。单击（函数（e）{
//如果在移动导航菜单或移动导航切换中发生单击，则忽略它
如果（！$（e.target）.closest（'.mobile导航菜单，.mobile导航切换'）.length）{
$（“.mobile nav menu”）.slideUp（）；
}
})
正文{
最小高度：100px；
背景颜色：浅灰色；
}
.移动导航菜单{
显示：无；
}

切换
菜单
这是工作代码

$(".mobile-nav-toggle").click(function (event) {
    event.stopPropagation();
    $(".mobile-nav-menu").slideToggle();
});

$(document).click( function(){
    $('.mobile-nav-menu').hide();
});

这是工作代码

$(".mobile-nav-toggle").click(function (event) {
    event.stopPropagation();
    $(".mobile-nav-menu").slideToggle();
});

$(document).click( function(){
    $('.mobile-nav-menu').hide();
});

谢谢你，阿伦，这很好用！还有一个相关的问题——当用户单击菜单中的链接时，如何关闭菜单？我将链接显示在
.mobile nav menu
div中的无序列表中。再次感谢@nickpish如果用户单击
移动导航菜单
元素中的任意一个元素，是否希望菜单关闭，如果是，请尝试
if（！$（e.target）.最近（'.mobile nav toggle'）。长度）{
是的——我在想，如果用户真的点击了移动导航栏中的一个链接，那么当链接页面开始加载时，也会触发菜单关闭……虽然这在桌面上工作得很好，但我注意到这个点击处理程序在iPad上似乎不适用于触摸/点击；你知道这是为什么吗，或者如果有这是一个可以帮助解决这类问题的库？谢谢Arun，这很好！还有一个相关的问题——当用户单击菜单中的链接时，我如何关闭菜单？我在
.mobile nav menu
div中的无序列表中显示了链接。再次感谢！@nickbish如果用户单击
mobile nav菜单
元素中的anywehre，如果是，请尝试
if（！$（e.target）.最近（'.mobile nav toggle'）。长度）{
是的——我在想，如果用户真的点击了移动导航栏中的一个链接，那么当链接页面开始加载时，也会触发菜单关闭……虽然这在桌面上工作得很好，但我注意到这个点击处理程序在iPad上似乎不适用于触摸/点击；你知道这是为什么吗，或者如果有有什么图书馆可以帮助解决这类问题？