javascript - 在移动设备上将 jQuery hover() 更改为 click()

Question

我有一个简单的 jQuery 下拉菜单，它没有任何问题。我遇到的问题是我的响应式设计仍然保持悬停效果，这在移动设备上无法正常工作。单击汉堡包图标 .menu 后是否可以取消悬停？这个想法是让 .subNav 隐藏在移动设备上，一旦用户点击 .topNav li a .sabNav 就会向下滑动。我无法在 fiddle 中附加响应式设计，但您可能会很好地了解它在做什么。

http://jsfiddle.net/9L3cE/1/

Answer 1

这个问题不仅仅是您要完成的任务。真正的问题是确定这一点:什么是移动？在您的情况下，您使用小屏幕尺寸作为触摸屏功能的代表。

目前这可能是一个不错的解决方案，但它不是一个很好的长期解决方案。如果您的网站上出现了一个微型上网本，并且根据您设置的响应断点，它会根据其屏幕尺寸获得“移动” View ，但它是一个没有任何实际触摸功能的设备，该怎么办？

无论如何，如果您使用屏幕大小作为触摸功能的代理，您可以进入您的 javacript 并根据您确定为“移动”(触摸)断点。例如。对于 600px 处的断点:

var menuEvent = ($(window).width() < 600) ? 'hover' : 'click';

然后，当你想绑定(bind)你的 UI 事件时，你会使用:

$(element).bind(menuEvent, function() { ... });