dotimeout не работает должным образом

Question

Я пытаюсь использовать плагин dotimeout для создания задержки для отображения суб-навигатора при наведении курсора на верхнюю навигационную панель. Вилка, похоже, хорошо работает, когда активный класс добавляется к первому li, но при добавлении к последующим li, он перестает показывать скрытый ul для этого выше активного li.

Вот мой сценарий:

$(function(){ 

    $('ul.main-nav').each(function(){ 
     var nav = $(this); 

     nav 
     .mouseover(function(e){ 
      nav.doTimeout('main-nav', 500, over, e.target); 
     }).mouseout(function(){ 
      nav.doTimeout('main-nav', 500, out); 
     }); 

     function over(elem) { 
      var parent = $(elem).closest('li.main-nav'); 

      out(parent); 
      parent.children('a').addClass('hover'); 
      parent.children('ul:hidden').slideDown('fast'); 
     }; 

     function out(elem) { 
      var parents = elem 
       ? $(elem).closest('li.main-nav').siblings() 
       : nav.children(); 

      if (nav.is('.main-nav-horizontal')) { 
       parents = parents.not('.active'); 
      } 

      parents.children('a').removeClass('hover'); 
      parents.children('ul').hide(); 
     }; 
    }); 

}); 

Here's my jsfiddle

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

Answer 1

Измените свою функцию на это.

function out(elem) { 

    var parents; 

    if (elem) { 
    parents = $(elem).closest('li.main-nav').siblings(); 
    } 
    else { 
    parents = nav.children(); 
    showthisone = parents.filter('.active'); 
    parents = parents.not('.active'); 
    } 

    parents.children('a').removeClass('hover'); 
    parents.children('ul').hide(); 

    if (!elem) { 
    showthisone.children('a').addClass('hover'); 
    showthisone.children('ul').show(); 
    } 

};