Question

我有一个简单的jQuery下拉列表，它没有任何问题。我遇到的问题是我的响应式设计仍然保留了悬停效果，这种效果在移动设备上无法正常工作。一旦点击汉堡图标.menu，有没有取消悬停？我们的想法是让.subNav隐藏在移动设备上，一旦用户点击.topNav li a .sabNav幻灯片，我无法在小提琴中附上响应式设计，但你可能很清楚它在做什么。

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

Answer 1

这个问题比你想要完成的事情更重要。真正的问题在于确定：移动设备是什么？在您的情况下，您使用小屏幕尺寸作为触摸屏功能的代理。

现在这可能是一个很好的解决方案，但它不是一个很好的长期解决方案。如果一个小型上网本进入您的网站，并根据您设置的响应断点，它会根据其屏幕大小获得“移动”视图，但它是一个没有任何实际触摸功能的设备？

无论如何，如果你使用屏幕尺寸作为触控功能的代理，你可以直接进入你的javacript并根据你确定为“你所确定的窗口宽度”在你想要使用的事件上设置一个标记。移动“（触摸）断点。例如。对于600px的断点：

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

然后，当您想要绑定UI事件时，您将使用：

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

Answer 2

我建议您确定设备是否有hover或否。如果它有hover，则生成html，结果将是：

<body class="with-hover">
    <!-- HTML Structure -->
</body>

如果它没有hover，您应该：

<body class="without-hover">
    <!-- HTML Structure -->
</body>

现在，将hover事件定义为适用于hover的情况，如果可能的话：

$("body.width-hover").on("hover", yourSelector, function() {/*Hover code here*/});

另外，定义您的click活动

$("body.without-hover").on("click", yourSelector, function() {/*Click event here*/});

在移动设备上将jQuery hover（）更改为click（）

2 个答案: