javascript - 带 Accordion 的导航菜单

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>

脚本:

//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. 当我 mouseout 时，所有扩建的医院都应该关闭
3. 此外，如果我在医院上移动鼠标过多，则只应执行最后一个操作，即菜单在很长时间内不应展开和折叠。

感谢任何帮助。这是 jsfiddle version我的工作

Answer 1

乍一看，这可能是 .stop() 函数的位置问题。

您所获得的代码有点复杂，因此对于缺少您的样式表示歉意，但我认为这接近您想要的？

http://jsfiddle.net/fJ6x8/

我使用的示例取自这篇文章 -> http://www.webdeveloper.com/forum/showthread.php?269859-DropDown-multilevel-menu-with-hover