触摸屏上的下拉菜单问题

Question

我正在尝试使下拉菜单与iPad等触摸屏设备兼容。

在PC上很好，您将鼠标悬停在菜单上，您将获得子菜单

，将鼠标悬停在子菜单上，您将获得...第三的？菜单。

但是，在触摸屏上，您按下第一个菜单，辅助菜单下拉菜单。你按下辅助菜单，一切都会再次隐藏起来。

这是一个代码笔来说明我的意思。

http://codepen.io/Fazy/pen/JWeaOW

任何想法 我如何修复 JS 以正确实现这一点？

这是我拥有的JS...

        $('.dropdown').hover(
          function() {
            $(this).toggleClass('open')
          },
          function() {
            $(this).removeClass('open')
          }
        );
        $('.dropdown-submenu, .dropdown').click(
          function() {
            $(this).parents('li').addClass('stayopen')
          }
        );

Answer 1

该代码笔不再工作，所以我猜测.hover和.click以某种方式踩到对方的脚趾，因为触摸事件模拟单击事件。

当您考虑触摸屏笔记本电脑时，对触摸设备使用悬停下拉菜单会变得相当复杂。

如果您正在寻找一个脚本来交换悬停和触摸的类并使其适用于所有设备，我写了一个jQuery插件和文章，其中详细介绍了浏览器中发生的事情。

http://fallingmonocle.com/monocle-toggle.php

希望这对您要实现的目标有所帮助。