使悬停菜单适用于移动设备的最佳实践方式是什么？

Question

我环顾四周，但没有找到一个似乎是常见问题的答案。

我有一个在悬停时激活的基本下拉菜单（使用 jQuery 的 hoverintent 插件）。它适用于桌面浏览器，但对于不能像 iPad 那样将悬停事件转换为点击的移动设备，它不起作用。这是现在的 Javascript：

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

我的问题是：在移动设备上使用点击并在桌面上使用鼠标悬停作为下拉菜单的最简洁、问题最少的方法是什么？我有几个想法，但不确定哪个：

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

2. 检测悬停功能（不确定如何完成）并使用点击处理程序（如果可用）。

Answer 1

当有事件处理程序时，至少 iOS 会自动干扰hover 事件，因此您必须为hover 事件点击一次，为任何click 事件点击第二次。

对 hove 的检测是微不足道的。检查客户端是否支持touch。如果有touch，就没有hover。

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

Answer 2

默认情况下，iO 和一些 Android 实现了点击鼠标悬停事件。它很方便，但是，您需要确保您的顶级链接指向有效的锚点。不可点击的父放置者的日子已经一去不复返了，如果该链接仅指向一个页面，所有子元素都列为链接，那就这样吧。但是让它去某个地方。