css / jquery中的移动（触摸）设备友好下拉菜单

Posted 2023-03-06

【中文标题】css / jquery中的移动（触摸）设备友好下拉菜单

【英文标题】：Mobile (touch) device friendly drop down menu in css / jquery

【发布时间】：2012-08-04 17:36:24

【问题描述】：

我一直在阅读有关此主题的许多主题，这是一个在移动设备上友好的下拉菜单。 很多时候，最好在下拉菜单上设置非悬停动作。 有一些解决方法，其中一个是下拉项的主超链接应链接到主题标签。

这使它可以在移动设备上运行，但对于普通的桌面用户来说，这会令人困惑。 所以解决方案是为桌面用户提供一个正常的下拉菜单，其中第一个超链接也链接到一个页面。 对于移动用户，点击某个项目会打开下拉菜单，但再次点击主项目会打开相应的页面。

我看过以下网站，不知怎的，他们的菜单就是这样工作的： http://www.hgtv.com/ 您可以在平板电脑上查看此内容，然后单击主菜单，再次点击该项目，您就会明白我的意思。

但我如何才能找到或下载与我自己的网站完全相同的设置？

提前致谢

【问题讨论】：

你试过“查看源代码”吗？您尝试了哪些方法，又是如何失败的？

【参考方案1】：

您将不得不处理多个事件才能在移动和桌面浏览器中获得该功能。

如果您查看该示例菜单，则将鼠标悬停以展开，而在移动设备上，您希望单击/触摸以展开。

我尝试实现此目的的一种方法是为桌面设置“悬停”侦听器，而为移动设备使用“触摸”事件侦听器。

为此，您必须向 jQuery 添加一个自定义事件，例如“触摸”。请参阅下面的帖子了解如何做到这一点：

How to recognize touch events using jQuery in Safari for iPad? Is it possible?

【讨论】：

感谢您的回复 PJH​​，将尽快检查

【参考方案2】：

试试这个：http://suanaikyeo.com/blog/make_dropdown/

我已经尝试过了，它适用于悬停和点击事件..

【讨论】：

链接已损坏。

【参考方案3】：

这是一种与设备无关的技术（不确定我对功能检测的信任程度。许多现代浏览器报告即使界面是鼠标也支持触摸事件）我曾经使悬停菜单按预期在触摸屏上工作（即，当我们只想第一次点击触发悬停时，防止触摸事件过早地“点击”顶部菜单链接）。

诀窍是要认识到触摸悬停+单击事件将在彼此的顶部发生.. 即悬停事件将几乎立即跟随单击事件。我们可以检测到这一点并阻止点击通过...仅在悬停事件后经过一定时间阈值时才允许点击触发。

在桌面上进行测试时，无论我点击多快，我都无法让悬停和点击之间的经过时间快于大约 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 悬停行为的良好插入式解决方案。

【讨论】：

我花了一些时间环顾各种解决方案，但似乎没有一个是干净可靠的。您的解决方案就像一个魅力，只有一个简短的 sn-p 代码。非常感谢发帖！

防止悬停是什么意思？在触摸屏上，没有光标，所以不可能“悬停”任何东西，不是吗？

@rockyraw 我没有看到我在哪里使用了“防止悬停”这个短语？该代码阻止 CLICK 事件通过。话虽如此，触摸屏浏览器确实会在单击事件之前立即生成一个“假”悬停事件，此代码利用该事件来检测鼠标和触摸屏使用之间的时间差异。

【参考方案4】：

这是我的工作：

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 网站。在桌面浏览器（非触摸浏览器）上，当单击主菜单项时，它将直接转到链接的位置。悬停时会显示下拉菜单。

对于移动设备（触摸浏览器），当主菜单项被触摸时，它会展开下拉菜单，如果再次单击它将转到新位置。我还添加了“重置”代码行来使这部分工作：如果您触摸第一个主菜单项（展开下拉菜单），然后触摸第二个主菜单项（展开第二个下拉菜单），然后触摸第一个主菜单再次单击项目，它仍将表现为下拉列表，直到再次单击。如果没有这条线，它将直接前往新位置。

【讨论】：

谢谢！正是我需要的！

完美运行，正是我想要的，谢谢！