Question

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

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

我应该如何实现这一目标？如果您想在此问题上获得我方的更多信息，请告诉我。

感谢。

Answer 1

尝试使用此代码：编辑：如果您的菜单有.nav-collapse类，您可以使用：

$("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/

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

2 个答案: