我有一个典型的下拉菜单,默认情况下是隐藏的,但通过以下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/

最佳答案

工作示例:
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');
   });
}

10-05 20:42
查看更多