如何在移动设备上实现最佳实践的悬停菜单？

Question

我已经查看了很多资料，但似乎没有找到一个常见问题的答案。

我有一个基本的下拉菜单，使用hoverintent插件激活（使用jQuery）。它在桌面浏览器上运行良好，但对于不将悬停事件转换为点击事件的移动设备（如iPad），它无法正常工作。以下是当前的Javascript代码：

$('li.threecolumns, li.twocolumns, li.onecolumn').hoverIntent(      
function() {
    $(this).children('div').fadeToggle(fadeInSpeed);
},
function() {
    $(this).children('div').fadeToggle(fadeOutSpeed);
});

我的问题是：在移动设备上使用点击，而在桌面上使用悬停来展开菜单，最干净、最少问题的方法是什么？我有一些想法，但不确定哪个好:

1. 每次点击时附加onclick事件并禁用悬停。

2. 检测是否能够悬停（不确定如何完成），如果可用则使用点击处理程序。

- Evan Hobbs

Answer 1

至少在iOS中，当存在事件处理程序时，会自动干扰hover事件，因此您需要先点击一次hover事件，然后再点击第二次任何click事件。

检测hover很简单。检查客户端是否支持touch。如果有touch，则不存在hover。

if ("ontouchstart" in document) {
    // touch only code
} else {
    // "desktop" code
}

- Torsten Walter

---

谢谢。那么我的问题是，对于那些移动设备但没有触摸屏的设备（例如黑莓），该怎么办？ - Evan Hobbs

他们应该像屏幕阅读器一样支持事件 - focus 和 blur 是首先想到的。不过我无法验证这一点。 - Torsten Walter

谢谢，Torsten。这是我之前没有意识到需要的好信息。太棒了。 - jffgrdnr

Answer 2

默认情况下，iOS和某些Android实现了点击悬停事件。这很方便，但是你需要确保你的顶级链接指向有效的锚点。不可点击的父元素已经过时了，如果那个链接只引导到一个包含所有子链接的页面，那就这样吧。但一定要让它去某个地方。

- o_O

---

我很担心这个问题... 我刚刚快速查看了 espn.com、sports.yahoo.com、skype.com 和其他几个网站，它们都像你说的那样使用一个指向父级链接的链接.. 难道没有其他方法可以解决这个问题，而不是为每个顶级导航项创建额外的页面吗？ - Evan Hobbs

你不需要页面，哈希就足够了。然后，你可以根据位置哈希来显示或隐藏菜单项。 - Torsten Walter

@TorstenWalter 非常好的观点。哈希是足够的。有一些优缺点，但如果你想避免额外的页面，那么哈希可能是最好的方法。 - o_O