下拉导航菜单 - 需要移动和触摸设备的帮助

Question

您好，我的网站有一个主导航菜单，可以在桌面上完美运行。鼠标悬停打开下拉菜单，父菜单项也是可点击的链接（而不是“#”）。

问题出在移动设备和触控设备上。由于这些设备没有“悬停”功能，因此当我单击父类别时，我会直接进入链接。我怎样才能让它第一次点击打开下拉菜单，并让父菜单链接在第二次点击时仍然有效？

我是否应该将我的下拉菜单设置从“悬停时打开”切换为“单击”，然后使用 css 和 jquery 在非触摸设备（即桌面）上启用悬停？

我是网页设计的新手。我花了好几个小时研究 jquery 和 css 代码，并尝试了关于这个问题的十几种不同的方法。这个问题似乎没有真正可靠的解决方案，它导致客户在移动平台上的可用性问题。这是我的网站www.greenenvysuppy.com 非常感谢您的帮助！

Answer 1

您要做的是为桌面和移动设备制作单独的菜单。对小型设备隐藏桌面设备，对大型设备隐藏移动设备。

然后，您可以让桌面菜单具有您想要的悬停功能，而在移动版本上，您可以让它在点击时工作。

在移动设备上，您将父菜单链接添加到子菜单作为顶部链接。这样，通过单击父菜单，菜单将滑动打开和关闭，因为用户应该依赖它，当他们想要转到父菜单链接时，他们只需单击第一个链接。

祝你好运！