jquery滑動/滑動嵌套列表上的瘋狂效果

Question

我想製作一個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李UL李UL裏。

我不知道如何'攻擊'這個問題。我已經想到了一些延遲，但我不知道如何實現它。

對此的任何意見將是非常有幫助的。

在此先感謝。

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;}); 
       } 
      }); 
    });