Jquery 触摸屏上的下拉菜单问题

我正在尝试使下拉菜单与触摸屏设备（如iPad）兼容

在个人电脑上，没关系，你把鼠标悬停在菜单上，你得到了子菜单，你把鼠标悬停在子菜单上，你得到了…三级菜单？菜单

但是，在触摸屏上，您按下第一个菜单，第二个菜单将下拉。你按下二级菜单，所有的东西都会再次隐藏起来

这里有一个密码笔来说明我的意思

有没有办法修复JS以正确实现这一点

这是我的JS

        $('.dropdown').hover(
          function() {
            $(this).toggleClass('open')
          },
          function() {
            $(this).removeClass('open')
          }
        );

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

---

该代码笔不再工作，因此我猜测。

悬停

和

单击

会以某种方式相互踩在对方的脚趾上，因为触摸事件模拟了单击事件

考虑到触摸屏笔记本电脑，在触摸设备上使用悬停下拉菜单变得相当复杂

如果您正在寻找一个脚本来为hover和touch交换类，并使其适用于所有设备，那么我写了一个jQuery插件和一篇文章，详细介绍了浏览器中的情况

希望这能帮助你实现你的目标