当用户触摸屏幕表面除菜单以外的任何部分时，如何关闭响应引导菜单

Question

我的网站设计使用Bootstrap framework v2.0.1。当在iPad、iPhone、平板电脑、智能手机等设备（而不是电脑、台式机和笔记本电脑）上浏览网站时，菜单项会折叠成一个图标，并放在屏幕的右上角。如果用户单击此图标，菜单将展开，如果用户希望他/她可以选择所需的菜单项，则链接到该菜单项的页面将打开，展开的菜单将关闭。这是我的网站目前的功能，它运行得非常好。

现在我面临的问题是，如果用户点击菜单图标，打开菜单（即菜单被展开），现在他/她触摸屏幕表面的任何地方，除了展开的菜单，菜单应该再次被折叠（收缩或关闭）。

我应该如何做到这一点？如果你想从我这边得到更多关于这个问题的信息，请告诉我。

谢谢。

Answer 1

尝试使用以下代码：编辑：如果你的菜单有.nav折叠类，你可以使用这个：

$("body").click(function(e){ // When we click in body (all clicks are in the body ) we detect what element we are clicking.
    if ($(e.target).hasClass(".nav-collapse")){ //if the element is not our menu (#menu), we use closemenu function (we close our menu)
        closemenu();
    };
});
function closemenu(){
 // close your menu
 $('.nav-collapse').collapse('hide');
}

Answer 2

为什么不尝试菜单上的jQuery .focusout事件侦听器？http://api.jquery.com/focusout/