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

});

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

有时一家医院的一半部门出现，一半已经不见了。
当我鼠标拖出时，所有扩展的医院应该关闭
此外，如果我在医院上进行了太多的鼠标移动，那么只应该执行最后一个动作，即菜单不应该展开和折叠多年。

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

Answer 1

乍一看，这可能是您.stop()功能放置的问题。

您所获得的代码有点复杂，因为缺乏造型而道歉，但我认为这接近您想要的？

http://jsfiddle.net/fJ6x8/

我使用的例子来自这篇文章 - ＆gt; http://www.webdeveloper.com/forum/showthread.php?269859-DropDown-multilevel-menu-with-hover

带手风琴的导航菜单

1 个答案: