1

2 つの方法で機能するドロップダウン メニューがあります

  1. クラシック CSS ホバー
  2. 最上位の li をクリックすると、jQuery を使用してメニューにクラスが追加され、メニューが表示されます。

クリック イベントでメニューを開いた場合は、メニューに閉じるボタンがあります。メニューのクラスを削除してやりたかったのです。これは機能しますが、まだメニューにカーソルを合わせているため、カーソルを離すまでメニューが消えません。これは理想的ではありません。私も使ってみ.hide()ましたが、それはCSSホバー機能を台無しにします。

要素のCSSホバーアクティブ化を削除するjQueryの方法はありますか? 以下は私がどのように機能させたかですが、CSSホバーのバインドを解除できれば、より少ないJSで実行できると思います。

    // Add class 'show' to .meganav__container. Visibility is controlled by CSS
    $('.meganav > li > a').on('click',function(){
        $('.meganav__container').removeClass('show');
        $(this).parents('li').children('.meganav__container').toggleClass('show');
    });

    // Closes menu when close button is clicked
    $('.subnav__container .close').on('click', function(){
        $(this).parents('.meganav__container').hide();
    });

    // For UX I'd like the menu to still work with hover
    $('.meganav > li').hover(
        function(){
            $(this).children('.meganav__container').show();
        },
        function(){             
            $(this).children('.meganav__container').hide();
        }
    );

これは、私がそれを機能させることを好む方法です

// Add class 'show' to .meganav__container. Visibility is controlled by CSS
$('.meganav > li > a').on('click',function(){
    $('.meganav__container').removeClass('show');
    $(this).parents('li').children('.meganav__container').toggleClass('show');
});

// Closes menu when close button is clicked
$('.subnav__container .close').on('click', function(){        
    //Remove hover on parent li but this doesn't work
    $(this).parents('li').unbind('onmouseover').unbind('onmouseout');
    $(this).parents('.meganav__container').removeClass('show');
});

それをいじる

4

1 に答える 1

1

このフィドルのコードを更新しました

基本的に、「hoverManagement」のクラスを持つ li でのみ CSS ホバー トリガーを作成しました。

次に、ナビゲーション ul に属する「li」要素にカーソルを合わせるたびに、class 属性が「hoverManagement」に設定され、CSS ホバーをトリガーできるようにする必要があります。

.meganav > li.hoverManagement:hover .meganav__container, .meganav__container.show {
    display: block;
}

更新された Javascript については、前述のフィドルを参照してください。

于 2013-06-28T18:38:03.603 に答える