0

メニューとドロップダウン パネルがあります。メニューにカーソルを合わせると、パネルが落ちます。メニューとドロップダウンを同時に強調表示したい。

私のコードは非常にうまく機能していますが、メニューにカーソルを合わせると、メニューの強調表示が追加され、メニューの外に出ても消えません。

<script type="text/javascript">
 $(window).load(function () {
     $(".menu-item").hover(function () {
         $(".menu-item").removeClass('menuHighlighted');
         $(this).addClass('menuHighlighted');
     });

     $(".panel-item").hover(function () {
         $(this).addClass('listHighlighted');
         $(this).parents('.menu-item').addClass('menuHighlighted');
     },
function () {
   $(this).removeClass('listHighlighted');
   $(this).removeClass('menuHighlighted');
});
});
</script>

ほぼ完成したと思いますが、まだわからないことが 1 つだけ残っています。私は追加しようとしています：

      $(".menu-item").mouseleave(function () {
          $(this).removeClass('menuHighlighted');
      });

しかし、それはうまくいきません。他の提案があれば助かります。

4

2 に答える 2

1

jQuery の hover 関数に 2 つのコールバック関数を提供する必要があります。移動するときに呼び出されるものと、移動するときに呼び出されるものです。

そして、最後のコールバック$(this).removeClass('menuHighlighted');は、そこになかったパネル項目からクラスを削除するため、おそらく親メニュー項目を意味していました。

編集2：

メニュー項目の mouseenter にクラスを追加しますが、パネルを離れるときにそれらを削除します。

したがって、次のようなものです。

$(window).load(
    function () {
        $(".menu-item").mouseenter(
        function () {
            $(".menu-item").removeClass('menuHighlighted');
            $(this).addClass('menuHighlighted');
        }
    );

    $(".panel-item").hover(function () {
        $(this).addClass('listHighlighted');
    },
    function () {
        $(this).removeClass('listHighlighted');
    });

    $("#pnClub").mouseleave(function () {
        $('.menu-item').removeClass('menuHighlighted');
    });
});
于 2013-08-08T19:24:03.730 に答える