Javascript 将jQuery hover（）更改为在mobile上单击（）
我有一个简单的jQuery下拉列表，它可以正常工作。我遇到的问题是我的响应性设计，它仍然保持悬停效果，这在移动设备上无法正常工作。单击汉堡包图标。菜单后，是否可以取消悬停？这样做的目的是在手机上隐藏.subNav，一旦用户单击.topNav图标，.sabNav就会向下滑动。我无法将响应性设计附在小提琴上，但你可能会对它的功能有一个很好的了解Javascript 将jQuery hover（）更改为在mobile上单击（）,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个简单的jQuery下拉列表，它可以正常工作。我遇到的问题是我的响应性设计，它仍然保持悬停效果，这在移动设备上无法正常工作。单击汉堡包图标。菜单后，是否可以取消悬停？这样做的目的是在手机上隐藏.subNav，一旦用户单击.topNav图标，.sabNav就会向下滑动。我无法将响应性设计附在小提琴上，但你可能会对它的功能有一个很好的了解 这个问题比你想要完成的更大。真正的问题在于确定这一点：什么是移动？在您的情况下，您使用小屏幕作为触摸屏功能的代理 目前这可能是一个不错的解决方案，但不是一个
这个问题比你想要完成的更大。真正的问题在于确定这一点：什么是移动？在您的情况下，您使用小屏幕作为触摸屏功能的代理 目前这可能是一个不错的解决方案，但不是一个很好的长期解决方案。如果一个微型上网本进入你的网站，根据你设置的响应断点，它根据屏幕大小获得移动视图，但它是一个没有任何实际触摸功能的设备，该怎么办 无论如何，如果您使用屏幕大小作为触摸功能的代理，您只需进入JavaScript并根据您确定为移动触摸断点的窗口宽度设置要使用的事件的标志。例如，对于600px处的断点：
var menuEvent = ($(window).width() < 600) ? 'hover' : 'click';
我建议您确定设备是否有悬停。如果有悬停，则生成html，结果如下：
<body class="with-hover">
<!-- HTML Structure -->
</body>
$("body.width-hover").on("hover", yourSelector, function() {/*Hover code here*/});
顺便说一句，如果您使用的是较新版本的jQuery，请使用.on而不是.bind。现在，它是附加事件处理程序的首选方法。绑定对我来说只是一个老习惯，我还在发抖。我不认为这是一个解决办法。几乎每个浏览器都有悬停事件。即使是移动浏览器也会将这些动作映射为触摸动作，例如，点击一次可触发悬停状态，点击移出容器可触发悬停。您当时不明白答案。我们检查设备是否有悬停事件，而不是浏览器是否有悬停事件。这可以通过多种方式完成，包括检查屏幕的大小，如您在文章中所述，但这是一个不同的问题，因此与问题无关。我们必须检查hover是否适用。从逻辑上讲，不是技术上。在Android设备上，hover不适用，即使它使用支持hover事件的浏览器。Lajos：完全公平的响应。但我很想了解如何在浏览器环境中检测设备是否具有悬停功能。我不能说我做过。好问题！事实上，这是一个很好的问题。您的解决方案是可以接受的，如您的帖子所述，但是，您可以检测操作系统或用户代理。在这里和这里看到更多
<body class="without-hover">
<!-- HTML Structure -->
</body>
$("body.width-hover").on("hover", yourSelector, function() {/*Hover code here*/});
$("body.without-hover").on("click", yourSelector, function() {/*Click event here*/});