Question

我的网站上有这个导航栏，它不会放在我的iPod touch上，我怀疑iPhone和iPad也是如此。 This is one of the pages

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

Answer 1

这里有一篇很好的文章 - 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 2

如果您对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，第二次点击会引发点击事件。

这应该有效。

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

Answer 3

我遇到的最优雅的解决方案是Osvaldas Valutis

他的方法涉及一个非常小的jQuery插件，可以通过下拉菜单检测导航列表项上的触摸事件。

例如，您可以按以下方式标记导航：

<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链接仍然按预期工作，因为它没有下拉菜单。唯一（非常小的）缺点是下拉列表中的第一个链接有一点冗余，但这并没有什么坏处。

基于触摸的设备上的下拉菜单

3 个答案: