css / jquery中的移动（触摸）设备友好下拉菜单
我一直在阅读有关此主题的许多主题，这是一个在移动设备上友好的下拉菜单。 很多时候，最好在下拉菜单中进行非hover操作。 有一些解决方法，其中一个是下拉项的主要超链接应链接到主题标签。
这使得它可以在移动设备上运行，但对于普通的桌面用户来说，这会让人感到困惑。 因此，解决方案是为桌面用户提供正常的下拉菜单，其中第一个超链接也链接到页面。 对于移动用户，点击项目将打开下拉菜单，但第二次点击主项目将打开相应的页面。
我看过以下网站，不知怎的，他们的菜单的工作原理如下： http ： //www.hgtv.com/你可以在平板电脑上查看，然后点击主菜单，再次点击该项，你会知道我的意思。
但是，我如何找到或下载我自己网站的确切类似设置？
提前致谢
您将不得不处理多个事件以在移动和桌面浏览器中获得该function。
如果您查看该示例菜单，则将鼠标hover在展开状态，而在移动设备上则需要单击/触摸以展开。
我试图实现这一目标的一种方法是为桌面设置“hover”监听器，但为移动设备使用“触摸”事件监听器。
为此，您必须向jQuery添加自定义事件，例如“touch”。 请参阅下面的post，了解相关方法：
如何在Safari for iPad中使用jQuery识别触摸事件？ 可能吗？
这就是我的工作：
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网站上使用它。 在桌面浏览器（非触摸浏览器）上，单击主菜单项时，它将直接进入链接的位置。 hover时，它会显示下拉列表。
对于移动（触摸浏览器），当触摸主菜单项时，它将扩展下拉列表，如果再次单击它将转到新位置。 我还添加了一个“重置”代码行以使该部分工作：如果您触摸第一个主菜单项（展开下拉列表），然后触摸第二个主菜单项（展开第二个下拉菜单），然后触摸第一个主菜单再次项目，它将仍然表现为下拉列表，直到再次点击。 没有这条线，它将直接进入新的位置。
这是一种与设备无关的技术（不确定我有多少信任function检测……许多现代浏览器报告支持触摸事件，即使接口是鼠标）我曾经使hover菜单按预期在触摸屏上工作（即，防止当我们只想要第一次点击触发hover时，触摸事件过早地“点击”顶部菜单链接。
诀窍是认识到触摸hover+点击事件将在彼此之上发生..即hover事件几乎立即被点击事件跟随。 我们可以检测到这一点，并防止点击通过……只有在自hover事件后经过一定时间阈值时才允许点击触发。
在桌面上进行测试时，无论我点击多快，我都无法在hover和点击之间快速获得超过150毫秒的时间。 在iPad（第4代）上进行测试时，hover和点击之间的经过时间总是在7到8毫秒左右。 所以我选择了50ms的阈值时间来允许点击。 我写的jQuery函数如下（这假设一个标准的嵌套列表CSShover菜单）：
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; }); }); }
到目前为止，像魅力一样工作。 对于速度较慢的设备，50ms可能太低。
对于非JS，您仍然会将默认的CSShover行为作为回退。
希望这有助于人们，因为我找不到一个好的插入式解决方案，不涉及可疑的function检测和/或使用JS重写你的CSShover行为。
试试这个： http ： //suanaikyeo.com/blog/make_dropdown/
我已经尝试了它，它适用于hover和点击事件..