0

レスポンシブ メニューに問題があります: ブラウザーのサイズが 800 ピクセルより大きい場合、ホバリングによってサブメニューが開く典型的なドロップダウン メニューですが、サイズが 800 ピクセル未満の場合、サブメニューはクリックして開きます (モバイルの場合)。

問題は、100% ズームでページを開くと正常に動作する (ホバリング) ことですが、ズームイン (800px 未満) すると 2 倍の効果があります。ホバー効果を「オフ」にしてクリックのみにする方法。うまくいけば、このコードはすべてを説明します:

function checkResize() {
    var ww = $(window).width();
    if ( ww < 800) {
        $('#main-menu-list li').on('click', function() {
            if ($(this).length>0) {
                $(this).children('ul').toggle();
            }
        });
    } else {
        $('#main-menu-list li').hover(function() {
                $(this).children('ul').fadeIn();
            },  
            function() {
                $(this).children('ul').fadeOut(200);
            }
        );
    };
};
4

1 に答える 1

0

メソッドが複数回呼び出されると仮定すると、checkResize新しいイベント リスナーを追加する前にイベント リスナーを削除する必要があります。たとえば、すべてのclick, mouseenter(ホバーイン) およびmouseleave(ホバーアウト) リスナーを削除します。

function checkResize() {
    $('#main-menu-list li').off('click mouseenter mouseleave');
    ...

これにより、クリックまたはホバー動作のいずれかが残ります。

于 2012-10-18T14:36:43.633 に答える