下拉菜單：在哈弗無限幻燈片使用jQuery

Question

我創建了一個簡單的下拉菜單與jQuery

https://jsfiddle.net/pmksgz3w/

HTML

<ul> 
    <li>Page A</li> 
    <li>Page B 
    <ul> 
     <li>Dropdown</li> 
     <li>Dropdown</li> 
    </ul> 
    </li> 
</ul> 

jQuery的

$(document).ready(function(){ 
      $('ul> li').hover(function() { 
       $(this).find('ul').slideToggle(); 
      }); 
     }); 

當我將鼠標懸停在頁面B，然後顯示下拉菜單。如果我將頁面B上的光標非常緩慢地移動到右側（參見圖片），那麼下拉菜單將關閉，因爲li不會在短時間內懸停。我怎樣才能防止下拉菜單馬上關閉？如果我將光標移動非常快的下拉菜單

更糟糕的問題發生。因爲這樣，下拉菜單將在無限循環中滑動並滑動。

我在How to tell .hover() to wait?找到了一個從2009年開始的有希望的解決方案，但是當我嘗試它時，答案不起作用，（編輯注：現在可用，請參閱下面的編輯）。此外還提到，應該使用hoverIntend插件。我下載插件，並改變了我的jQuery代碼到

$(document).ready(function(){ 
      $('ul> li').hoverIntend(function() { 
       $(this).find('ul').slideToggle(); 
      }); 
     }); 

，雖然它提高了一些東西，它會馬上閉合和無限循環保持了上述問題。我怎麼解決這個問題？

---

編輯：我設法解決了第一個問題！現在下拉不會立即關閉！

https://jsfiddle.net/5sxvsu8w/

我不得不改變jQuery代碼如下：

$(document).ready(function(){ 
    var timer; 

    $('ul> li').hover(function() { 
     clearTimeout(timer); 
     $(this).find('ul').slideDown('fast'); 
    }, function() { 
     var list = $(this).find('ul'); 
     timer= setTimeout(function() { 
     list.slideUp('fast'); 
    }, 2000); 
    }); 
}); 

然而，無限循環問題仍然存在。

Answer 1

你here發現是有用的，這段JavaScript代碼也許可以幫助解決辦法：

$(document).ready(function(){ 
 
      
 
    $('.menu li').hover(
 
    function() { 
 
     $('.sub', this).stop().slideDown(650); 
 
    }, 
 
    function() { 
 
     $('.sub', this).stop().slideUp(650); 
 
    } 
 
); 
 

 
}); 
 

 

 

 

 
/*$('ul >li').hover(function() { 
 
    clearTimeout($(this).data('timeout')); 
 
    $('li > ul').slideDown('fast'); 
 
}, function() { 
 
    var t = setTimeout(function() { 
 
     $('li > ul').slideUp('fast'); 
 
    }, 650); 
 
    $(this).data('timeout', t); 
 
});*/

li{ 
 
    list-style-type:none; 
 
    display: inline-block; 
 
    position: relative; 
 
    padding: 20px; 
 
    background-color: #08c; 
 
} 
 

 
li ul li{ 
 
    min-width:200px; 
 
} 
 

 
li ul{ 
 
    margin:0; 
 
    padding:0; 
 
    position: absolute; 
 
    top: 100%; 
 
    left:0; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul class="menu"> 
 
    <li>Page A</li> 
 
    <li>Page B 
 
    <ul class="sub"> 
 
     <li>Dropdown</li> 
 
     <li>Dropdown</li> 
 
    </ul> 
 
    </li> 
 
    
 
</ul>

編輯：一些研製後，我已經改變了我的javascript代碼;不幸的是，這個解決方案並沒有完全解決第一個問題（它仍然基於計時器），但是避免了無限循環。