Jquery 将ipad上的悬停下拉菜单替换为单击事件

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

当第二级悬停在上时，第三级显示为下拉列表

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

通过阅读本文，我了解到这是因为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();
});
}

任何帮助都将不胜感激

谢谢

var clickHandler=（/iPhone/i.test（navigator.userAgent）| | |/iPad/i.test（navigator.userAgent）| |/iPod/i.test（navigator.userAgent）？“鼠标悬停”：“点击”）； $（“#主菜单ul li ul.children li'）。打开（单击处理程序，函数（）{ mysubnav=$（this.children（'ul.children'）； css（{'left'：$（this.position（）.left}）.show（）； }); 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(); });