Question

您好我为电子商务平台创建了一个jquery megamenu。我已经设置好了，当你将鼠标悬停在顶层的li上时，它的所有兄弟姐妹都会消失并出现相关的兄弟姐妹。问题是，如果你将“手套”悬停在“手套”上，那么“头盔”会很快出现“手套”，好像有延迟一样。然而，如果你很快从“头盔”变成“手套”，它就能正常工作。有任何想法吗？感谢

这里是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');

Answer 1

我认为你有太多的悬停事件被触发 - 所以如果你快速移动你的鼠标会有很多事情发生。

当您将鼠标悬停在顶级菜单项上时，您将鼠标悬停在<a>和<li>上，所以

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

和

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

都会执行。

此外，jQuery .hover()还需要：

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

或

hover( handlerInOut(eventObject)  )

因此，在您的情况下，您使用的是handlerInOut，因为您在hover（）中只使用了一个函数 - 因此当鼠标离开时鼠标进入AND时该函数将触发。这意味着当您进出顶级导航项时，会触发四个事件。

另请注意，$('#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();
    },
);

您可能需要调整并清理上述代码 - 这只是一个普遍的想法。

由于延迟，Jquery巨型菜单显示多个菜单

1 个答案: