Навигационное меню с аккордеоном

Question

Я пытаюсь воспроизвести то, что tibco.co.in сделал с навигацией для своего меню «Продукты». Я придумал следующее.

HTML:

<li class="ASSOCIATION_MENU_HANDLER"> 
    <a href="javascript:void(0);">Hospital Menu</a> <!-- this is always visible--> 

    <div class="ASSOCIATION_MENU"> <!-- this div shows up when I mouseover the menu--> 
     <ul class="sub-options"> 
      <li class="submenu-level-1> <!-- level1--> 
       <span> 
        <a href="javascript:void();">Apollo Hospital</a> 
       </span> 
       <ul> 
        <li class="submenu-level-2"> 
     <!-- level2--> <span><a href="#">Accident Department</a></span>  
        </li> 
        <!----Several Departments with li.submenu-level-2 ----------> 
      </li> 
      <!----Several Hospitals with li.submenu-level-1 ----------> 
     </ul> 
    </div> 
</li> 

SCRIPT:

//shut down all expanded hospitals 
jQuery(".sub-options ul").slideUp(); 

//trigger for showing the menu 
$(".ASSOCIATION_MENU_HANDLER").hover(
    function(){$(this).find(".ASSOCIATION_MENU").slideToggle(400);}, 
    function(){$(this).find(".ASSOCIATION_MENU").hide();} 
), function() { 
    jQuery(".sub-options ul").slideUp(); 
}; 

//controll mouseover on each hospital item 
$('.sub-options > li').mouseenter(function(event) { 
     jQuery(".sub-options ul").stop(); //stops all the current animations 
     var me = $(this).children('ul'); 
     var theLi; 
     //remove 'active' class from other hospitals 
     $('.sub-options li').not(this).each(function() { 
      theLi = $(this); 
      if(theLi.find("span > a").first().hasClass("active")) { 
       theLi.find("span > a").first().removeClass("active"); 
      } 
     }); 
     //shut down other hospitals 
     $('.sub-options ul').not(me).slideUp("slow"); 

    //show up the current hospital's departments 
     me.slideDown("slow"); 
    //add 'active' class to current hospitals 
     $(this).find("span > a").first().addClass("active"); 

}); 

Это работает правильно, когда движение мыши очень медленно. Для более быстрых пользователей возникают некоторые проблемы:

1. иногда половина отделений больницы появляется, половина ушла.
2. Когда я нажимаю, все расширенные больницы должны отключиться
3. Также, если я делаю слишком много движения мыши над больницами, тогда должно выполняться только последнее действие, так как меню не должно расширяться и разрушаться на века.

Любая помощь приветствуется. Вот jsfiddle version моей работы

Answer 1

На первый взгляд, возможно, это проблема с размещением вашей функции .stop().

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

http://jsfiddle.net/fJ6x8/

пример я использовал взят из этого поста ->http://www.webdeveloper.com/forum/showthread.php?269859-DropDown-multilevel-menu-with-hover