0

こんにちは、e コマース プラットフォーム用の jquery メガメニューを作成しました。トップ レベルの li にカーソルを合わせると、その兄弟 ul がすべて消え、関連する 1 つが表示されるように設定しました。問題は、'gloves' にカーソルを合わせてから 'helmets' にすばやく移動すると、'gloves' が遅れて表示されることです。それでも、「ヘルメット」から「手袋」にすばやく移行すると、問題なく機能します。何か案は？ありがとう

ここにjqueryコードとサイトへのリンクがあり ます http://www.firecrestmoto.co.uk/index.php

      // Add controller class to <li> on top level
      $('#menu.accordion ul li ul    li').parent().parent().parent().addClass('parentitem');


      // Hide and show entire category and sub categories at the same time
      $('#menu.accordion a').addClass('menu_closed');
       $('#menu.accordion a').hover(

    function(){
    $(this).addClass('menu_open');
    $(this).siblings('ul').fadeIn();
    $('#menu.accordion ul li ul').show();
    }
    );

      $('ul.parentitem').mouseleave(function(){
$(this).hide();
       });


      // Hover on <li> in the top level menu
    $('#menu.accordion li').hover(function(){
$(this).siblings('li').children('ul.parentitem').hide();
$(this).children('ul.parentitem').css('z-index','10000');
});


        // Leave the main menu div, all submenus disappear
         $('#menu').mouseleave(function(){
$(this).children('li').children('ul').hide();
        });


     // Add controller classes to <li> on each sub level
       $('#menu.accordion').children('li').addClass('topline');
        $('#menu.accordion ul.parentitem').children('li').addClass('finallines');
4

1 に答える 1

1

あまりにも多くのホバー イベントが発生していると思います。そのため、マウスをすばやく動かすと、多くのことが起こっています。

最上位のメニュー項目にカーソルを合わせると、 と の両方にカーソルを合わせていることに<a>なり<li>ます。

$('#menu.accordion a').hover(

と

$('#menu.accordion li').hover(

両方実行します。

また、jQuery .hover()は次のいずれかを取ります。

hover( handlerIn(eventObject) , handlerOut(eventObject)  )

また

hover( handlerInOut(eventObject)  )

したがって、あなたのケースでは、 hover() 内で1つの関数のみを使用しているため、handlerInOutを使用しています。したがって、マウスが入ったときとマウスが離れたときに関数が起動します。つまり、最上位のナビゲーション項目に出入りすると、4 つのイベントが発生します。

また、$('#menu.accordion li')最上位の項目だけでなくli、サブメニューのすべての項目にも一致することに注意してください。それぞれにホバー イベントを関連付けます。これはあまりにも多くのイベントです。

したがって、両方のホバーの代わりに、次のようなことを試してください。

$('#menu.accordion').children('li').hover(function(){
        // Add here your code for mouse enter
        $(this).siblings('li').children('ul.parentitem').hide();
        $(this).children('ul.parentitem').css('z-index','10000');
        $(this).find('a').addClass('menu_open');
        $(this).find('ul').fadeIn();
        // I'm not sure what the following is supposed to do...
        // ...you are showing ul in all sub-menus.
        $('#menu.accordion ul li ul').show();
    }, function(){
        // Add here your code for mouse leave
        $(this).find('a').removeClass('menu_open');
        $(this).children('ul.parentitem').css('z-index','0').hide();
    },
);

上記のコードを調整してクリーンアップする必要があるかもしれません - これは単なる一般的な考えです。

于 2012-05-23T12:27:59.237 に答える