javascript - jQuery 下拉队列建立

Question

我用 jQuery 创建了一个下拉菜单，点击顶部的Preview 按钮可以看到:

var open_submenu = null;

$(function(){
  $('.dropdown').hover(function(){

    // hide all previous submenus and fix queue buildup problem
    $('.sublinks').stop(false, true).hide();

    // get corresponding submenus
    var submenu = $(this).parent().next();

    $(this).parent().nextAll().stop();

    $(submenu).css({
      top: $(this).offset().top + $(this).height() + 4 + 'px',
      left: $(this).offset().left + 'px',
      zIndex:10000
    });

    // show the submenu
    $(submenu).stop().slideDown(300);

    open_submenu = submenu;

    submenu.hover(function(){}, function(){
      $(this).slideUp(300);
    });
  }, function(){});
});

http://jsbin.com/ubire3/edit

除一个问题外，它工作正常。当我快速将鼠标悬停在主要悬停链接(蓝色链接)上时，例如。水平移动 快速 悬停在每个顶部菜单上，一些子菜单不会关闭。我该如何做到即使我将鼠标快速悬停在它们上方，所有其他子菜单也会关闭？

编辑

我看到这个有用的链接使用一些方法来避免这种情况，但有一些问题，如何在我的案例中应用它。

What are queues in jQuery?

Answer 1

太好了，最后我自己解决了这个问题:

我所做的就是修改这一行:

$('.sublinks').hide();

到

$('.sublinks').stop(false, true).hide();

stop 停止了先前子菜单的动画。您可以在 jQuery site 上查看它的文档.

在此处查看固定版本:

http://jsbin.com/ubire3/5/edit