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.
我将尝试完成此操作的一种方法是让桌面的悬停侦听器使用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.
为此，您必须向jQuery添加一个自定义事件，例如touch。请参阅下面的帖子以获取一个方法：
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:
这篇关于css / jquery中的移动（触摸）设备友好下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
