Question

我有一个典型的下拉菜单，默认情况下隐藏但是通过以下jQuery魔法

<ul class="navNew">
    <li  class="test">
        <a href="#">OPTION</a>
        <ul>
            <li>Suboption -- Hidden</li>
        </ul>
    </li>
</ul>

$(".navNew li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
    $(this).toggleClass('hover');                                  
});

因此，使用mouseenter和mouseleave，“hover”类将添加到菜单中以使其可见或将其关闭以使其再次不可见。

这一切都像魅力一样，问题出现在iPad上。单击将充当鼠标中心，但再次单击该按钮不会充当鼠标左键，因此菜单永远不会再次关闭。可以修改此代码，以便点击也会打开并关闭此菜单吗？

我创建了一个jsFiddle来解释我的菜单正在做什么：http://jsfiddle.net/qgrt5/

Answer 1

工作示例： http://jsfiddle.net/qgrt5/

修改：以下代码现在将检查用户是否来自iPad，如果是，则会使用click功能代替mouseenter

var isiPad = navigator.userAgent.match(/iPad/i) != null;

if (isiPad) {
    $(".navNew li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
        $(this).toggleClass('hover');                                       
    });
}
else {
  $(".navNew li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
        $(this).toggleClass('hover');                                       
   });
}

在iPad上处理mouseenter和mouseleave

1 个答案: