在iPad上處理mouseenter和mouseleave

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