问题描述
我一直在阅读这个主题的许多主题，一个在移动设备上友好的下拉菜单。
很多时候，最好在下拉菜单中使用非悬停操作。
有一些解决方法，一个是下拉项目的主要超链接应链接到一个hashtag。
I have been reading many topics on this subject, a drop down menu which is friendly on mobile devices.Many times it is considered best to have a non-hover action on the drop down menu.There are workarounds, with one being that the main hyperlink for the drop down item should link to a hashtag.
这使它可以在移动设备上工作，但正常的桌面用户，这会很混乱。
因此，解决方案是为桌面用户提供一个正常的下拉菜单，其中第一个超链接也链接到一个页面。
对于移动用户，点击某个项目将打开下拉菜单，但第二次点击主要项目将打开相应的页面。
This makes it work on mobile devices but for the normal desktop user, this would be confusing.So the solution would be to have a normal drop down menu for desktop users in which the first hyperlink also links to a page.For mobile users, the tap on an item will open the drop down menu, but a second tap on the main item will open the corresponding page.
I已经看到以下网站，不知何故，他们的菜单的工作原理如下：
您可以在平板电脑上查看此项，然后点击主菜单，再次点按该项，您将知道我的意思。
I have seen the following site and somehow their menu works exactly like that:http://www.hgtv.com/You can view this on a tablet and click on the main menu, tap that item again and you will know what i mean.
但是如何找到或
预先感谢
推荐答案
您必须处理多个事件才能在移动和桌面浏览器中获得此功能。
You are going to have to handle multiple events to get that functionality in both mobile and desktop browsers.
如果您查看示例菜单，请将鼠标悬停在展开位置在手机上，您需要点击/触摸展开。
If you look at that example menu you hover to expand whereas on mobile you want a click/touch to expand.
我尝试实现这一点的一种方法是为桌面设置hover监听器，但是为移动设备使用touch事件监听器。
One way I would try to accomplish this would be to have the 'hover' listener for desktop but use a 'touch' event listener for mobile.
要做到这一点，你必须添加一个自定义事件，如'touch'到jQuery。请参阅以下信息，了解如何执行此操作：
To do this you will have to add a custom event such as 'touch' to jQuery. See the post below for a way to do that:
How to recogized touch event using Jquery for ipad safari browser? Is it possible?
这篇关于移动（触摸）设备友好的下拉菜单在css / jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！