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

【问题标题】：Dropdown menu stays open on touch devices下拉菜单在触摸设备上保持打开状态
【发布时间】：2026-01-23 17:35:01
【问题描述】：

我有一个下拉菜单，除了在触摸设备上之外，它都很好用。在 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')
        });
    });

【问题讨论】：

不确定悬停是否是触摸屏的最佳方法。尝试专注。因为那样当'失焦'功能应该是假的。你见过jQuery上的悬停功能吗？你有两个参数函数。 hover(function(){//in hover},function(){//out of hover});。所以你可以用这种方式反转动画吗？
"focus" 似乎不起作用。抱歉，我对 javascript 很陌生，所以我可能需要一些代码示例才能真正掌握您的建议。
我正在尝试使用modernizr 为触摸事件提供替代方案，但我不清楚如何实现这一目标..
正确，不要在触摸屏上使用悬停。您应该使用点击来打开和关闭导航。

标签： jquery ipad touch jquery-hover

【解决方案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.
});

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

【讨论】：

这不起作用。在常规浏览器中悬停时不再显示导航菜单。

【解决方案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();
    });
});

【讨论】：