jquery - 下拉菜单在触摸设备上保持打开状态

Question

我有一个下拉菜单，除了在触摸设备上之外，它都很好用。在 ipad 上，当您触摸其中一个菜单项时，下拉菜单会正常显示，但即​​使您触摸屏幕上的其他位置，下拉菜单也会保留在那里。如果您触摸屏幕上的其他位置，如何使菜单消失？这是jsfiddle：

http://jsfiddle.net/Jkfbm/

这是我的jQuery：

    $(document).ready(function(){
$('ul.nav_menu > li').hover(function() {
    $(this).children(".sub_menu")
        .stop(true, true)
        .animate({
            height:"toggle",
            opacity:"toggle"
        },600, 'easeInOutQuad')
        });
    });

Answer 1

像这样的东西。我认为这是您的切换，但我可能又错了，因为您说过它适用于其他设备和浏览器。

$('li','.nav_menu'.hover(function(){
    $(this).animate({height:'100%','opacity':'1'},600);//plus I've noticed a syntax error on this line.
//unexpected bracket after 'easeInOutQuad'
},function(){
    $(this).animate({height:'0%','opacity':'0'},600);//putting back the animation.
});

我可能是错的，但试试看会发生什么。

Answer 2

我目前正在尝试这个...更好的建议有人吗？

$(document).ready(function () {
    $('ul.nav_menu > li').hover(

    function () {
        $(this).children(".sub_menu")
            .stop(true, true)
            .animate({
            height: "toggle",
            opacity: "toggle"
        }, 600, 'easeInOutQuad');
    });
    $('html').click(function() {
        $(".sub_menu").hide();
    });
});