基于触摸设备的下拉菜单

我在我的网站上有这个导航栏，它不会在我的iPod touch上下拉，我怀疑iPhones和iPad也是如此。 这是其中的一页

我想知道是否有任何快速修复启用触摸/hover。

CSS

Answer 1

如果你对iDevices感兴趣，那么你可以使用这个技巧：

#nav ul { display: none; /* Your styles */ } #nav > li:hover ul { display: block; } /* This is important */ #nav > li > a:hover { color: #fff; /* You can set the same color or add other style.*/ } 

如果一个元素具有:hover事件，则第一次点击iOS渲染:hover ，第二次点击引发点击事件。

这应该工作。

PS最好为移动，触摸和桌面制作不同的UI逻辑。

Answer 2

这里有一篇很好的文章 – http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/

我build议使用Modernizr，因为它提供了一个可以用于触摸屏设备的非触摸CSS类，或者您可以使用Javascript来检测hover并向您的元素添加一个类。

 if (!("ontouchstart" in document.documentElement)) { document.documentElement.className += " no-touch"; } 

Answer 3

我遇到的最优雅的解决scheme是由Osvaldas Valutis

他的方法涉及一个非常小的jQuery插件来检测导航列表项目上的触摸事件与下拉ul菜单。

例如，你可能会像这样标记你的导航：

 <nav id="nav-primary"> <ul> <li><a href="/">Home</a></li> <li><a href="/about/">About</a> <ul> <li><a href="/about/index.html">Dropdown item 1</a></li> <li><a href="/about/page.html">Dropdown item 2</a></li> </ul> </li> </ul> </nav> 

然后用一行jQuery调用插件，如下所示：

 $( '#nav-primary li:has(ul)' ).doubleTapToGo(); 

这样可以确保上面示例中的Home链接仍然按预期工作，因为它没有下拉菜单。 唯一的（非常小的）缺点是在下拉列表的第一个链接上有一点冗余，但是这并没有什么坏处。