帶手風琴的導航菜單

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. 當我將鼠標移出時，所有擴展的醫院都應關閉
3. 另外，如果我在醫院上進行了太多的鼠標移動，則僅應執行最后一個操作，即菜單不會隨着時間的推移而展開和折疊。

任何幫助表示贊賞。 這是我工作的jsfiddle版本

Answer 1

乍一看，這可能與您的.stop()函數的位置有關。

對於缺少樣式的代碼，要道歉很復雜，但是我認為這很接近您想要的嗎？

http://jsfiddle.net/fJ6x8/

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