在jQuery導航菜單上使用非嵌套子菜單實現setTimeout的問題

Question

我有一個菜單列表，其子菜單沒有嵌套用於樣式目的。因此，我使用mouseenter和mouseleave以及settimeout來進行懸停行爲。

這裏是我的html：

<li class="dropdown"><a href="#">Link 1</a></li> 
<div class="subnav"> 
<ul> 
<li><a href="#">Link 1.1</a></li> 
<li><a href="#">Link 1.2</a></li> 
<li><a href="#">Link 1.3</a></li> 
<li><a href="#">Link 1.4</a></li> 
    </ul> 
</div> 

<li class="dropdown"><a href="#">Link 2</a></li> 
<div class="subnav"> 
<ul> 
<li><a href="#">Link 2.1</a></li> 
<li><a href="#">Link 2.2</a></li> 
<li><a href="#">Link 2.3</a></li> 
<li><a href="#">Link 2.4</a></li> 
    </ul> 
</div> 

<li class="dropdown"><a href="#">Link 3</a></li> 
<div class="subnav"> 
<ul> 
<li><a href="#">Link 3.1</a></li> 
<li><a href="#">Link 3.2</a></li> 
<li><a href="#">Link 3.3</a></li> 
<li><a href="#">Link 3.4</a></li> 
    </ul> 
</div> 

</ul> 
</div><!-- End topNav --> 

而且我的jquery：

$(document).ready(function(){ 

var overSubmenuFlag = false; 
var timeout; 
var subnav; 
var offset; 

$("li.dropdown").mouseenter(function(){ 

    clearTimeout(timeout); 
    $(".subnav").hide(); 

    $(this).children('a').addClass("active"); //Add active class to link element 

    var subnav = $(this).next("div.subnav"); //find navigation box associated with this nav tab 
    var offset = $(this).position(); //Position subnav relative to nav tab 
    var leftpos = (offset.left + 15) + "px"; 
    var toppos = (offset.top + 36) + "px"; 
    subnav.css({ 
     position: 'absolute', 
     left: leftpos, 
     top: toppos 
    }); 

    subnav.show(); //Reveal subnav 

}).mouseleave(function() { 
    clearTimeout(timeout); 
    var timeout = setTimeout(function() { 
     if(!overSubmenuFlag) { 
      var subnav = $("li.dropdown").next("div.subnav"); 
      subnav.hide(); 
      $("li.dropdown").children('a').removeClass("active");  
     }},100);   
}); 
$(".subnav").mouseenter(function(){ 
    clearTimeout(timeout); 
    overSubmenuFlag = true; 
}).mouseleave(function(){ 
    overSubmenuFlag = false; 
    $(".subnav").hide(); 
    $("li.dropdown").children('a').removeClass("active");  
}); 
}); 

一切都會按計劃，除了以下：當我鼠標移出一個導航標題，並迅速將鼠標放置到另一頭，子菜單與新標題相關的短暫出現然後消失。 （在兩個導航標題之間緩慢移動可正常工作）。在輸入新的導航時，如何正確地停止與setTimeout函數關聯的所有操作（並關閉所有打開的子菜單）。頭？非常感謝您的幫助！

Answer 1

這是您的問題？

}).mouseleave(function() { 
    clearTimeout(timeout); 
    var timeout = setTimeout(function() { 
    ^^^