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

Question

我的网站上有这个导航栏，但它不会在我的 iPod touch 上下拉，我怀疑 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，第二次点击引发点击事件。

那应该行得通。

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();

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