我一直在阅读有关此主题的许多主题，这是一个在移动设备上友好的下拉菜单。 很多时候，最好在下拉菜单上设置非悬停动作。 有一些解决方法，其中一个是下拉项的主超链接应链接到主题标签。
这使它可以在移动设备上运行，但对于普通的桌面用户来说，这会令人困惑。 所以解决方案是为桌面用户提供一个正常的下拉菜单，其中第一个超链接也链接到一个页面。 对于移动用户，点击某个项目会打开下拉菜单，但再次点击主项目会打开相应的页面。
我看过以下网站，不知怎的，他们的菜单就是这样工作的： http://www.hgtv.com/ 您可以在平板电脑上查看此内容，然后单击主菜单，再次点击该项目，您就会明白我的意思。
但我如何才能找到或下载与我自己的网站完全相同的设置？
提前致谢
【问题讨论】：
标签： jquery css ipad mobile drop-down-menu
您将不得不处理多个事件才能在移动和桌面浏览器中获得该功能。
如果您查看该示例菜单，则将鼠标悬停以展开，而在移动设备上，您希望单击/触摸以展开。
我尝试实现此目的的一种方法是为桌面设置“悬停”侦听器，而为移动设备使用“触摸”事件侦听器。
为此，您必须向 jQuery 添加一个自定义事件，例如“触摸”。请参阅下面的帖子了解如何做到这一点：
How to recognize touch events using jQuery in Safari for iPad? Is it possible?
【讨论】：
试试这个：http://suanaikyeo.com/blog/make_dropdown/
我已经尝试过了，它适用于悬停和点击事件..
【讨论】：
这是一种与设备无关的技术（不确定我对功能检测的信任程度。许多现代浏览器报告即使界面是鼠标也支持触摸事件）我曾经使悬停菜单按预期在触摸屏上工作（即，当我们只想第一次点击触发悬停时，防止触摸事件过早地“点击”顶部菜单链接）。
诀窍是要认识到触摸悬停+单击事件将在彼此的顶部发生.. 即悬停事件将几乎立即跟随单击事件。我们可以检测到这一点并阻止点击通过...仅在悬停事件后经过一定时间阈值时才允许点击触发。
在桌面上进行测试时，无论我点击多快，我都无法让悬停和点击之间的经过时间快于大约 150 毫秒。在 iPad（第 4 代）上进行测试时，悬停和点击之间的经过时间始终约为 7 - 8 毫秒。所以我选择了 50ms 的阈值时间来允许点击。我写的 jQuery 函数如下（这里假设一个标准的嵌套列表 CSS 悬停菜单）：
function initNav(){
// make drop-downs work properly with touchscreens by preventing instant hover-click
$( some_selector_for_your_top_level_list_items ).each(function(){
var li = $(this);
li.mouseover(function(){
// store time of hover event
li.data( 'hoverTime', new Date().getTime() );
});
li.children('a').click(function(){
// only allow click if at least 50ms has elapsed since hover
return ( new Date().getTime() - li.data('hoverTime') ) > 50;
});
});
}
到目前为止，工作就像一个魅力。对于速度较慢的设备来说，50 毫秒可能太低了。
对于非 JS，您仍将默认 CSS 悬停行为作为后备。
希望这对人们有所帮助，因为我找不到一个不涉及可疑特征检测和/或使用 JS 重写 CSS 悬停行为的良好插入式解决方案。
【讨论】：
这是我的工作：
function isTouchDevice(){
return typeof window.ontouchstart !== 'undefined';
}
jQuery(document).ready(function(){
/* If mobile browser, prevent click on parent nav item from redirecting to URL */
if(isTouchDevice()) {
// 1st click, add "clicked" class, preventing the location change. 2nd click will go through.
jQuery("#menu-main-menu > li > a").click(function(event) {
// Perform a reset - Remove the "clicked" class on all other menu items
jQuery("#menu-main-menu > li > a").not(this).removeClass("clicked");
jQuery(this).toggleClass("clicked");
if (jQuery(this).hasClass("clicked")) {
event.preventDefault();
}
});
}
});
我将它用于我的 WordPress 网站。在桌面浏览器（非触摸浏览器）上，当单击主菜单项时，它将直接转到链接的位置。悬停时会显示下拉菜单。
对于移动设备（触摸浏览器），当主菜单项被触摸时，它会展开下拉菜单，如果再次单击它将转到新位置。我还添加了“重置”代码行来使这部分工作：如果您触摸第一个主菜单项（展开下拉菜单），然后触摸第二个主菜单项（展开第二个下拉菜单），然后触摸第一个主菜单再次单击项目，它仍将表现为下拉列表，直到再次单击。如果没有这条线，它将直接前往新位置。
【讨论】：