mouseover与mouseout事件多次触发下拉菜单的silde效果

<ul><li><a href="JavaScript:">gagggg</a>

　　　　　　<dl><dd>zzzzzzzzzz</dd><dd>zzzzzzzz</dd><dd>zzzzzzzzzz</dd><dd>zzzzzzzzzzzzz</dd><dd>zzzzzzzzzzzzzzz</dd></dl>

　　</li>

</ul>

<script type="text/javascript">
　　$('li').children('dl').css({'margin': '0','display' :'none'})
　　$('li').mouseover(function(){
　　　　$(this).children('dl').slideDown();
　　});
　　$('li').mouseout(function(){
　　　　$(this).children('dl').slideUp();
　　});
</script>

上面的写法  当a标签没有display：block的情况下（主要是看a标签又没有占满li宽度和高度，因为mouse事件是给li的），当放到a标签的时候下拉菜单slideDown两次，中间有一次slideUp；若鼠标横向移动离开a标签但是没有移除li标签的范围；下拉菜单发生一次sildeUp和一次slideDown；当鼠标下移，移到下拉菜单上的时候，下拉菜单会无限次的slideDown与silideUp；

                当a标签display：block时，a标签占满了li的宽度，鼠标放到a上时下拉菜单一次sildeDown（正常效果）；鼠标下移到下拉菜单上时，下拉菜单还是会无限次的slideDown与silideUp；

多次发生slideDown与sildeUp的情况主要是因为 mouse事件问题：

mouseover与mouseenter

　　不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。

　　只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

mouseout与mouseleave

　　不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。

　　只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

1：a标签没有display：block；可以看到下图中li标签与a标签之间有1px的间隔；

　　所以当鼠标放到a上的时候（鼠标从li的上方往下移动），触发事件的顺序是：li标签的mouseover→slideDown一次；

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　鼠标从1px到a标签上触发 li 标签的mouseout→slideUp一次；

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　鼠标放到 a 标签上触发 li 标签的mouseover→slideDown一次；

2：鼠标接着横向往有移动。触发事件的顺序：离开a标签触发li标签的mouseout→slideUp一次；

　　　　　　　　　　　　　　　　　　　　　鼠标放到li上触发 li 标签mouseover→slideDown一次；

3：鼠标下移到下拉菜单上。触发事件的顺序：li标签的mouseout→slideUp一次；

　　　　　　　　　　　　　　　　　　　　slideUp是个过程需要时间，但是mouseout与mouseover瞬间发生；下拉菜单还没有sildeUp完成鼠标已经触发了下拉菜单的mouseover；

　　　　　　　　　　　　　　　　　　　　下拉菜单的mouseover→slideDown一次；

　　　　　　　　　　　　　　　　　　　　就这样事件多次被触发（火狐下是无限触发）；

　　　　　　　　　　　　　　　　　　　　　　

那么怎么解决呢？1：可以用jq的stop方法阻止动画；写法简单；

　　　　　　　　2：可以从事件触发的角度解决。

1：$(this).children('dl').stop(true).slideDown();$(this).children('dl').stop(true).slideUp();