【前言】
二级下滑菜单经常出现的一个问题:当鼠标在菜单上快速滑动时,会如下所示,同时有多个子菜单在不停的显示、隐藏。
【主体】
(1)初始代码:
jQuery(document).ready(function($) { $(".main>li").hover(function() { $(this).children("ul").slideToggle(400); }); });
(2)解决方案
这里我给出两种解决方方案:
①使用stop()方法来停止重复动画
jQuery(document).ready(function($) { $(".main>li").hover(function() { $(this).children("ul").slideDown(); }, function() { $(this).children("ul").stop(true,false).slideUp(); }); });
②使用toggle()方法替代
jQuery(document).ready(function($) { $(".main>li").hover(function() { $(this).children("ul").toggle(); }); });
.