jquery - 用 ipad 上的点击事件替换悬停下拉菜单

Question

我有一个在桌面上运行良好的 3 级菜单。

将鼠标悬停在第 2 级时，第 3 级显示为下拉菜单。

在 iPad 上，正在显示第 3 层菜单，但链接需要双击才能加载，而不是单击一次。

通过阅读这篇文章，我了解到这是因为 iPad 不支持悬停效果，但可以使用 jQuery 中的单击事件。

这是我的 jQuery，当悬停在 2 级时会显示 3 级菜单：

    $('#primary-menu ul li ul.children li').mouseover(function(){
    mysubnav= $(this).children('ul.children');


    mysubnav.css({'left':$(this).position().left}).show();
});
$('#primary-menu ul li ul.children li').mouseout(function(){

    $(this).children('ul.children').hide();
});

我不确定如何修改它以支持 iPad。

我尝试将其添加到我的文档顶部，在所示代码上方准备就绪，但没有任何区别：

//ipad and iphone fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) ||            (navigator.userAgent.match(/iPad/i))) {
$("#primary-menu ul li ul.children li").click(function(){

    mysubnav= $(this).children('ul.children');

    mysubnav.css({'left':$(this).position().left}).show();
});
}

任何帮助，将不胜感激。

谢谢

Answer 1

    var clickHandler = (/iPhone/i.test(navigator.userAgent) || /iPad/i.test(navigator.userAgent) || /iPod/i.test(navigator.userAgent) ? "mouseover" : "click") ;

    $('#primary-menu ul li ul.children li').on(clickHandler, function() {
        mysubnav= $(this).children('ul.children');
        mysubnav.css({'left':$(this).position().left}).show();
    });