移动（触摸）设备友好的下拉菜单在css / jquery [英] Mobile (touch) device friendly drop down menu in css / jquery

问题描述

我一直在阅读这个主题的许多主题，一个在移动设备上友好的下拉菜单。
很多时候，最好在下拉菜单中使用非悬停操作。
有一些解决方法，一个是下拉项目的主要超链接应链接到一个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已经看到以下网站，不知何故，他们的菜单的工作原理如下：
http://www.hgtv.com/
您可以在平板电脑上查看此项，然后点击主菜单，再次点按该项，您将知道我的意思。

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！