jQuery Dropdown队列建立

时间:2010-03-15 07:08:01

标签: javascript jquery html css

我已经使用jQuery创建了一个下拉列表,可以通过点击顶部的预览按钮在此处看到:

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?

2 个答案:

答案 0 :(得分:2)

太棒了,最后我自己解决了这个问题:

我所做的就是修改这条线:

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

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

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

请参阅此处的修订版:

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

答案 1 :(得分:0)

在此处修正http://jsbin.com/ubire3/3

我不知道为什么我的更改没有反映在链接上方

here

我没有使用stop方法