0

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

这是 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)  )

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

另外，请注意，这$('#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 回答