1

我在以下网站上使用 CSS 下拉菜单： 网站

您可以在顶部菜单项中测试菜单。在桌面上一切正常。但在 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;
}

你知道为什么不吗？

4

4 回答 4

1

这就是解决方案

$('#menu li ul li a').bind('touchstart', function(){
        var href = $(this).attr('href');
        location.href = href;
})
于 2014-08-28T10:37:39.953 回答
0

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

希望这有效

于 2013-09-25T14:50:01.300 回答
0

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

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

  1. 将现代化器导入您的代码： http: //modernizr.com/

  2. 通过 JavaScript 将悬停转换为双击：

    $('.mainmenu').doubleTap(function() { $(this).toggleClass('hover');
    });

  3. 添加class="mainmenu"到列表项

希望这可以帮助

于 2013-09-25T14:16:38.000 回答
0

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

onClick=”return true”

这很简单，这对我有用。

于 2015-10-20T18:32:57.630 回答