Построение очереди раскрывающегося списка 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

Работает нормально, за исключением одной проблемы. Когда я наведите курсор мыши на основные ссылки (синие) быстро, например. при горизонтальном быстром при наведении на каждое верхнее меню некоторые подменю не закрываются. Как мне сделать так, чтобы, даже если я быстро наведи на них все остальные подменю, были закрыты?

Редактировать

Я видел эту полезную ссылку, используя некоторые способы, чтобы избежать этого, но у меня возникли некоторые проблемы, как применить это в моем случае.

Что такое очереди в jQuery?

Answer 1

Отлично, наконец-то я решил проблему сам:

Все, что я сделал, это изменил строку:

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

до

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

stop остановил анимацию для предыдущих подменю. Вы можете посмотреть документацию на сайте jQuery .

См. Исправленную версию здесь:

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

Answer 2

Исправлено здесь : http://jsbin.com/ubire3/3

Я не знаю, почему мои изменения не были отражены @ над ссылкой

Посмотри здесь

я не использую stop метод