Question

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

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

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

但我怎样才能找到或下载我自己网站的确切类似设置？

提前致谢

Answer 1

以下是我的工作：

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

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

Answer 2

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

诀窍是认识到触摸悬停+点击事件将在彼此之上发生..即悬停事件几乎会立即被点击事件跟踪。我们可以检测到这一点并防止点击通过......只有在自悬停事件后经过一定时间阈值时才允许点击触发。

在桌面上进行测试时，无论我点击多快，我都无法在悬停和点击之间快速获得超过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;
      });
    });
  }

到目前为止，像魅力一样工作。对于速度较慢的设备，50ms可能太低了。

对于非JS，您仍然可以使用默认的CSS悬停行为作为后备。

希望这对人们有所帮助，因为我找不到一个好的插件解决方案，它不涉及可疑的功能检测和/或使用JS重写你的CSS悬停行为。

Answer 3

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

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

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

要执行此操作，您必须向jQuery添加自定义事件，例如“touch”。请参阅下面的帖子，了解相关方法：

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

Answer 4

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

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

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

4 个答案: