在iPhone上的菜单外点击时强制导航菜单缩回

Question

请参阅 http://beta.jigsaw.org/的菜单。我找不到一种方法在iPhone上的菜单外点击时自动关闭它。

在桌面上，这可以通过这样的事情来解决：

var clicked_menu = false;
$(".navbar-collapse").click(function() {
    clicked_menu = true;
});
$("body").click(function() {
    if(!clicked_menu) $(".navbar-collapse").collapse('hide');
    clicked_menu = false;
});

我尝试使用jQuery tap（http://api.jquerymobile.com/tap/），但无法让它以同样的方式工作。

Answer 1

因为我假设你想在点击一个项目时隐藏菜单，所以我会做一些简单的事情，比如

$(document).on("touchstart click", function() { 
     if ($(window).width() <= 767)
         $(".navbar-collapse").collapse('hide');
});

您可能还想事先检查菜单是否显示。

Answer 2

感谢 Last1here 的一些指导，我找到了解决方案。

$("body > div:not(.navbar-wrapper)").on("touchstart", function() {
    $(".navbar-collapse").collapse('hide');
});