Question

我在以下网站上使用css-down-down菜单： Website

您可以在顶部菜单项中测试菜单。在桌面上一切正常。但在iPhone或iPad上没有。在那里，您可以点击其中一个顶部菜单项。然后下拉菜单打开没有问题。但是如果我点击下拉菜单中的一个链接就没有任何反应。

这是下拉菜单的css代码：

#mainmenu ul li > ul {
    display: none;
    top: 0px;
}
#mainmenu ul li:hover  > ul,
#mainmenu ul li:active > ul,
#mainmenu ul li:focus  > ul,
#mainmenu ul li > a#aktuell + ul {
    display: block;
    z-index: 9999;
}

你知道为什么不呢？

Answer 1

解决方案

$('#menu li ul li a').bind('touchstart', function(){
        var href = $(this).attr('href');
        location.href = href;
})

Answer 2

好的，下拉菜单是通过悬停事件触发的。正如我之前在评论中所说，在触摸设备中，点击事件相当于点击和悬停，因此它无法直接使用。

如果悬停菜单项没有链接，解决方法是：

将现代化程序导入您的代码：http://modernizr.com/
通过JavaScript将悬停转换为双击：

$（'。mainmenu'）。doubleTap（function（）{ $（本）.toggleClass（ '悬停'）;
}）;
将class="mainmenu"添加到列表项

希望这有帮助

Answer 3

JavaScript解决方案

var nav = document.getElementById('nav');
var els= nav.getElementsByTagName('li');
for(var i = 0; i < els.length; i++){
    els[i].addEventListener(’touchstart’, function(){this.className = “hover”;}, false);
    els[i].addEventListener(’touchend’, function(){this.className = “”;}, false);

其中nav是包含memu

的div的id

Jquery解决方案

$('#nav li').bind('touchstart', function(){
    $(this).addClass('hover');
}).bind('touchend', function(){
    $(this).removeClass('hover');
});

<强> CSS

li:hover, li.hover { /* whatever your hover effect is */ }

希望这有效

Answer 4

嗯，试一试。尝试输入＆＃34;＆lt; a＆gt;标记＆＃34;

下面的代码

onClick=”return true”

这很简单，这对我有用。

iPhone / iPad上的CSS下拉菜单 - 无法点击链接

4 个答案: