jquery slidedown/slideup对嵌套列表的疯狂影响答案

【问题标题】：jquery slidedown/slideup crazy effect on nested listsjquery slidedown/slideup对嵌套列表的疯狂影响
【发布时间】：2014-02-13 00:36:03
【问题描述】：

我正在尝试制作一个类似于手风琴的 mouseenter/mouseleave 菜单。

如果您查看页面，您会看到左侧的菜单，尝试将鼠标悬停在某个元素上，然后尝试将鼠标悬停在下面的某个元素上，您将获得疯狂的向下滑动/向上滑动的疯狂效果正在谈论。

您可以在此视频中看到问题：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。

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

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

提前致谢。

【问题讨论】：

让我知道下面的代码是否有效
我觉得比以前好多了，但还没有完全解决。另外，我必须创建一个函数来切换 ani 并将该函数作为回调传递给 slideUp/slideDown。
如果您将问题隔离到小提琴，我可以帮助您解决它
感谢您的帮助，这是小提琴：jsfiddle.net/pu2sH/2，这是该问题的视频：quick.as/o34oiqpw。悬停太快时，可以看到疯狂的列表上下起伏。

标签： jquery css submenu slidedown slideup

【解决方案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;});
                }
          });
    });

【讨论】：