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

问题描述

我一直在阅读有关此主题的许多主题，这是一个在移动设备上友好的下拉菜单.很多时候，最好在下拉菜单上进行非悬停操作.有一些解决方法，其中一个是下拉项的主超链接应该链接到一个主题标签.

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.

我看过以下网站，不知何故他们的菜单就像这样: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.

但是我如何才能为我自己的网站找到或下载完全相似的设置?

But how can i find or download the exact similar setup for my own site?

提前致谢

推荐答案

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

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.

我尝试实现此目的的一种方法是为桌面使用悬停"侦听器，但为移动设备使用触摸"事件侦听器.

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.

为此，您必须向 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:

如何在 iPad 的 Safari 中使用 jQuery 识别触摸事件?有可能吗?

这篇关于css/jquery 中的移动(触摸)设备友好下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！