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

【问题标题】：CSS Drop Down Menu on iPhone / iPad - can't click linksiPhone / iPad上的CSS下拉菜单 - 无法点击链接
【发布时间】：2013-09-25 13:55:42
【问题描述】：

我在以下网站上使用 CSS 下拉菜单： 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;
}

你知道为什么不吗？

【问题讨论】：

下拉是怎么触发的，如果是使用hover选择器触发的，在ipad或者iphone的点击事件中相当于点击和悬停，所以下拉是不起作用的
我已经添加了代码。我尝试使用:hover、:active 和:focus。但没有任何效果
正如我告诉你的，点击事件相当于点击、悬停、聚焦，所以没有任何效果试试我的回答

标签： css mobile drop-down-menu

【解决方案1】：

这就是解决办法

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

【讨论】：

【解决方案2】：

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 */ }

希望这可行

【讨论】：

好的，我用 jquery 尝试了这个解决方案。我已集成此代码（但将 #nav 更改为 .menu）。我已将 li.hover 添加到下拉菜单可见的行（#mainmenu ul li:hover>ul、#mainmenu ul li>a#aktuell+ul、#mainmenu ul li.hover>u）。但没有成功 - 再次出现同样的错误。
好的，看看有没有其他解决办法
好的，现在我创建了一个 jsFiddle：jsfiddle.net/fomlackner/hyFWP。我刚刚在我的 iphone 上测试了这个小提琴 - 它在那里工作:( ...网站的布局错了吗？还是 div？

【解决方案3】：

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

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

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

$('.mainmenu').doubleTap(function() { $(this).toggleClass('hover');
});
将class="mainmenu"添加到列表项

希望对你有帮助

【讨论】：

感谢您的回答-但这对我不起作用。我已经集成了modernizr、jquery和javascript，并将“mainmenu”类添加到菜单的ul-tag中
将类添加到有悬停事件的列表项中
你检查其他答案了吗

【解决方案4】：

好吧，试一试。尝试在下面的代码中放入“标签”

onClick=”return true”

这很简单，这对我有用。

【讨论】：