下拉菜单上的触摸设备(Drop-down menu on touch based devices)

我有我的网站上这样的导航栏，它降不下来，我的iPod触摸，我怀疑为iPhone和iPad相同。 这是一个页面中

我想知道是否有任何快速解决，使触摸/悬停。

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第二接头引发Click事件。

这应该工作。

PS这是更好地使不同的UI逻辑，移动，触摸和桌面。

Answer 2:

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

我建议使用Modernizr的 ，因为它提供了你可以使用触摸屏设备无触摸CSS类，或者您可以使用JavaScript来检测悬停和添加一个类的元素。

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

Answer 3:

最优雅的解决方案，我已经遇到是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();

这确保了在例如在主页上面的链接仍然正常工作，因为它没有一个下拉菜单。 唯一的（非常小）的缺点是，有在下拉菜单中的第一链路冗余的一点点，但是，这并不伤害。

文章来源: Drop-down menu on touch based devices