Javascript 手风琴导航菜单

我试图复制他们的产品菜单导航功能。我想出了以下的东西

HTML:

当鼠标移动非常缓慢时，此功能正常工作。对于更快的用户，一些问题正在发生-

有时，医院的一半科室出现了，一半科室消失了

当我离开时，所有扩建的医院都应该关闭

此外，如果我在医院上移动过多鼠标，则只应执行最后一个操作，即菜单在很长时间内不应展开和折叠 感谢您的帮助。这是

---

关于我的工作

乍一看，可能是您的

.stop（）

函数的位置有问题

你的代码有点复杂，所以很抱歉没有你的风格，但我认为这是接近你想要的

---

我使用的例子取自本文->

感谢您的努力。在其他stackoverflow帖子的帮助下，我能够使动画变得更好。我很快就会发布我的解决方案。谢谢

<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>

//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");

});