Question

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

这是我的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();
    });
});

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

2 个答案: