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

我一直在阅读关于这个主题的许多话题,一个在移动设备上友好的下拉菜单.
很多时候,最好在下拉菜单中进行非悬浮动作.
有解决方法,一个是下拉项目的主要超链接应链接到一个主题标签.

这使得它在移动设备上工作,但对于普通的桌面用户来说,这将是令人困惑的.
因此,解决方案是为桌面用户提供一个普通的下拉菜单,其中第一个超链接也链接到一个页面.
对于移动用户,点击项目将打开下拉菜单,但是主菜单上的第二个点击将打开相应的页面.

我看到以下网站,不知何故他们的菜单完全如此：
http://www.hgtv.com/
您可以在平板电脑上查看此内容,然后点击主菜单,再次点按该项目,您将会知道我的意思.

但是,如何找到或下载与我自己的网站完全相似的设置？

提前致谢

解决方法

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

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

尝试完成此操作的一种方法是让桌面的“悬停”侦听器使用“触摸”事件侦听器进行移动.

为此,您必须向jQuery添加一个自定义事件,例如“touch”.看到下面的帖子有一个办法：

How to recogized touch event using Jquery for ipad safari browser? Is it possible?

原文地址：https://www.jb51.cc/css/217155.html