jQuery Slidedown/SlideUp 对嵌套列表的疯狂效果

Question

我正在尝试制作一个类似鼠标输入/鼠标离开手风琴的菜单。

如果你看一下页面，你会看到左侧的菜单，尝试将鼠标悬停在某个元素上，然后尝试将鼠标悬停在下面的某个元素上，你会得到我所说的疯狂的滑下/滑上疯狂的效果。

您可以在此视频中看到问题：http://quick.as/o34oiqpw。这里有一个小提琴的例子：http://jsfiddle.net/pu2sH/2/。

jquery是这样的：

$('ul li').on('mouseenter', function(event) {
        event.preventDefault();
        $('ul:first',this).slideDown();
    }).on('mouseleave',function(event){
        event.preventDefault();
        $('ul:first',this).slideUp();
    });

html是一个简单的ul li ul li ul li。

我不知道如何"攻击"这个问题。我想到了滑行的某种延迟，但我不知道如何实现它。

对此的任何建议都将非常有帮助。

提前谢谢。

Answer 1

我猜你想编辑这段代码：

   $('.menu-lateral .acordeon li').on('mouseenter', function() {
        $('.children:first',this).slideDown();
    }).on('mouseleave', function() {
        $('.children:first',this).slideUp();
    });

也许是这样的：

   var ani = false;
   $(document).ready(function(){  
       //other init code...
       $('.menu-lateral .acordeon li').on('mouseenter', function() {
                if (!ani){
                    ani = true;
                    $('.children:first',this).slideDown(function(){ ani = false;});
                 }
         }).on('mouseleave', function() {
                if (!ani){
                    ani = true;
                    $('.children:first',this).slideUp(function(){ ani = false;});
                }
          });
    });