Question

我在台式机上有一个3级菜单。

当第二级被悬停时，第3级显示为下拉列表。

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

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

这是我的jQuery导致在第二级悬停时显示第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();
    });

使用ipad上的click事件替换悬停下拉菜单

1 个答案: