<ul class="main">
<li><a href="#">菜单一</a>
<ul>
<li><a href="">子菜单1</a></li>
<li><a href="">子菜单2</a></li>
<li><a href="">子菜单3</a></li>
</ul>
</li>
<li><a href="#">菜单二</a>
<ul>
<li><a href="">子菜单1</a></li>
<li><a href="">子菜单2</a></li>
<li><a href="">子菜单3</a></li>
</ul>
</li>
<li><a href="#">菜单三</a>
<ul>
<li><a href="">子菜单1</a></li>
<li><a href="">子菜单2</a></li>
<li><a href="">子菜单3</a></li>
</ul>
</li>
</ul>
stop()方法来停止重复动画
jQuery(document).ready(function($) {
$(".main>li").hover(function() {
$(this).children("ul").slideDown();
}, function() {
$(this).children("ul").stop(true,false).slideUp();
});
});
stop([clearQueue],[jumpToEnd]);
clearQueue:如果设置成true,则清空队列,可以立即结束动画。
jumpToEnd:如果设置成true,则完成队列,可以立即完成动画。可选,默认是false
使用toggle()方法替代
jQuery(document).ready(function($) {
$(".main>li").hover(function() {
$(this).children("ul").toggle();
});
});