用的mouseenter和鼠标离开对iPad

处理我有一个典型的看下拉由默认，但通过下面的jQuery魔术用的mouseenter和鼠标离开对iPad

<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和鼠标离开，类“悬停”

所以隐藏菜单被添加到菜单中以使其可见或将其关闭以使其不可见。

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

我创建了一个的jsfiddle解释一下我的菜单是这样做的：http://jsfiddle.net/qgrt5/

来源

2013-03-24 Mark

使用 “的onclick” 事件HTTP：// WWW。 w3schools.com/jsref/event_onclick.asp – 2013-03-24 15:51:53

@JoeDF我还想保持悬停功能。如果我增加一个点击绑定，然后单击工作，但如果你点击后，移动鼠标离开它会切换悬停所以它会被逆转（可见当鼠标处于关闭状态） – Mark 2013-03-24 15:53:36

姆......这是否帮助？ http://www.w3schools.com/js/tryit.asp?filename=tryjs_events_mouseover – 2013-03-24 15:58:52

-3

工作例如： 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');          
    }); 
}

来源

2013-03-24 16:04:48

它与点击的工作，但我想保持悬停功能也是如此。这里的关键是要有除了悬停点击工作，以便将悬停 – Mark 2013-03-24 16:24:42

功能@马克我已经更新，以便它使用点击和悬停 - 和检测的iPad – 2013-03-24 16:29:06

这不会检测到任何其他类型的平板电脑。 iPad是少数。 – 472084 2013-08-06 12:39:36

用的mouseenter和鼠标离开对iPad

回答

相关问题