处理iPad上的鼠标进入和鼠标离开

Dealing with mouseenter and mouseleave on the iPad

本文关键字：鼠标 离开 处理 iPad      更新时间：2023-09-26

我有一个典型的下拉菜单，默认情况下是隐藏的，但通过以下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和mouselleave，类"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');                                       
   });
}
相关文章：