4

私はデフォルトで非表示になっている典型的な見た目のドロップダウンメニューを持っていますが、次の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を使用すると、クラス「ホバー」がメニューに追加されて表示されるか、オフに切り替えて再び非表示になります。

これはすべて魅力のように機能します。問題はiPadにあります。シングルクリックはマウスエンターとして機能しますが、ボタンをもう一度クリックしてもマウスリーブとしては機能しないため、メニューが再び閉じることはありません。クリックするとこのメニューも開いたり閉じたりするように、このコードを変更できますか？

メニューの機能を説明するためにjsFiddleを作成しました：http： //jsfiddle.net/qgrt5/

4

1 に答える 1

-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-24T16:04:48.357 に答える