15

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

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

我看过以下网站，不知何故他们的菜单工作方式完全一样： http ://www.hgtv.com/ 您可以在平板电脑上查看并单击主菜单，再次点击该项目，您就会明白我的意思.

但是我怎样才能为我自己的网站找到或下载完全相同的设置？

提前致谢

4

4 回答 4

19

这是我的工作：

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

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

于 2014-09-11T03:47:56.547 回答
4

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

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

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

于 2013-07-17T18:52:54.010 回答
2

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

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

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

为此，您必须向 jQuery 添加自定义事件，例如“触摸”。有关执行此操作的方法，请参见下面的帖子：

如何在 iPad 版 Safari 中使用 jQuery 识别触摸事件？是否可以？

于 2012-08-07T17:28:29.263 回答
0

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

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

于 2013-01-29T06:08:29.277 回答