使移动菜单适用于移动设备的最佳做法是什么？

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和一些Android会执行悬停事件。这很方便，但是，您需要确保您的*链接导致有效的锚点。不可点击的父母放置者的日子已经过去，如果这个链接只导致一个页面，所有的孩子被列为链接，那就这样吧。但让它去某个地方。

Answer 2

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

霍夫的检测是微不足道的。检查客户端是否支持touch。如果有touch，则不存在hover。

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