我正在尝试复制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");
});
当鼠标移动非常缓慢时，这可以正常工作。对于更快的用户，一些问题正在发生 -
- 有时医院的科室出现一半，一半消失。
- 当我鼠标退出时，所有扩展的医院都应该关闭
- 此外，如果我在医院上移动了太多鼠标，则只应执行最后一个操作，即菜单不应长时间展开和折叠。
任何帮助表示赞赏。这是 我工作的jsfiddle 版本