在iPad上处理mouseenter和mouseleave [英] Dealing with mouseenter and mouseleave on the iPad

问题描述

我有一个默认隐藏的典型外观下拉菜单，但是通过以下jQuery魔术

 < ul class = navNew > 
< li class =test> 
< a href =＃> OPTION< / a> 
< ul> 
< li>子选项 - 隐藏< / li> 
< / ul> 
< / li> 
< / ul> 
 
 $（。navNew li）。unbind（'mouseenter mouseleave'）。bind（'mouseenter mouseleave'，function（）{
 $（this）.toggleClass（'hover' ）; 
}）; 
  

因此，使用mouseenter和mouseleave时，类悬停将添加到菜单中可见或切换它使其再次不可见。

这一切都像一个魅力，问题在iPad上。单击将作为一个mouseenter，但再次单击该按钮不会充当mouseleave，因此菜单不会再次关闭。这段代码是否可以修改，以便点击打开并关闭这个菜单？

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

解决方案

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

编辑：下面的代码现在将检查用户是否来自iPad，如果是，它将使用点击函数而不是 mouseenter

  var isiPad = navigator.userAgent.match（/ iPad / i）！= null; 
 $ b $ if（isiPad）{
 $（。navNew li）。unbind（'mouseenter mouseleave'）。bind（'mouseenter mouseleave'，function（）{
 $ （this）.toggleClass（'hover'）; 
}）; 
 
 $ {
 $（。navNew li）。unbind（'mouseenter mouseleave'）。bind（'mouseenter mouseleave'，function（）{
 $（this ）.toggleClass（'hover'）; 
}）; 
} 
  

I have a typical looking drop down menu that is hidden by default but by the following jQuery magic

<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');                                  
});

So with a mouseenter and a mouseleave, the class "hover" is added to the menu to make it visible or toggle it off to make it invisible again.

This all works like a charm, problem is on the iPad. A single click will act as a mouseenter, but clicking the button again does not act as a mouseleave, and so the menu never closes again. Can this code be modified so that a click will open and close this menu as well?

I've created a jsFiddle to explain what my menu is doing: http://jsfiddle.net/qgrt5/

解决方案

Working example: http://jsfiddle.net/qgrt5/

Edit: The below code will now check if the user is coming from an iPad, and if they are, it will use the click function instead of the 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！