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

Question

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

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

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

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

这是我的 jQuery，当悬停在第二级时会显示第三级菜单：

    $('#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(); });