JQuery幻燈片等待變量未設置

Question

我很困惑，爲什麼這不起作用，請有人指出我在正確的方向嗎？我寫了一些JQuery來下滑子菜單。然而，當在菜單中移動鼠標時，它會觸發數千個事件，我試圖讓它在做另一個滑動之前等待隱藏完成。但是，這似乎不起作用：

$("li.title").children('ul').hide(); 
var hidden = true; 

$("li.title").hover(
    function() { 
     if (hidden == true){ 
     var height = $(this).children('ul').height() + $(this).height(); 
     $(this).height(height); 
     $(this).children('ul').slideDown(); 
     var hidden = false; 
     } 
    }, 
    function() { 
     $(this).height(25); 
     $(this).children('ul').hide(function() { 
     var hidden = true; 
     }); 
    } 
); 

Answer 1

您需要刪除var。問題是你正在創建一個新的範例hidden範圍到你的回調函數，並沒有看到全局hidden。

$("li.title").children('ul').hide(); 
var hidden = true, 
    myTimeout; 

$("li.title").hover(
    function() { 
     clearTimeout(myTimeout); 
     myTimeout = setTimeout(function(){ 
      if (hidden == true){ 
      var height = $(this).children('ul').height() + $(this).height(); 
      $(this).height(height); 
      $(this).children('ul').slideDown(); 
      hidden = false; //Removed var here 
      } 
     },100); 
    }, 
    function() { 
     clearTimeout(myTimeout); 
     myTimeout = setTimeout(function(){ 
     $(this).height(25); 
     $(this).children('ul').hide(function() { 
     hidden = true; //and here 
     }); 
     },100); 
    } 
); 

Answer 2

從hidden變量的回調函數內懸停刪除var。您將在本地重新分配這些變量，因此它不會監聽全局變量hidden。

更改此：

var hidden = false;

這樣：

hidden = false;