JavaScript setTimeoutの範囲の問題

Question

var toogleDelay = 500; 
var closeTimeout = null; 

$(">ul>li", $nav).hover(function() { 
    var $this = $(this); 
    if(closeTimeout) { 
     clearTimeout(closeTimeout); 
    } 
    var openMenuCallback = function() { 
     $this.addClass("hover"); 
    }; 
    window.setTimeout(openMenuCallback, toogleDelay); 
}, function() { 
    var $this = $(this); 
    var closeMenuCallback = function() { 
     $this.removeClass("hover"); 
    }; 
    closeTimeout = window.setTimeout(closeMenuCallback, toogleDelay); 
}); 

私はこのスニペットを使用してマルチドロップダウンメニューを開いたり閉じたりします。メニューを0.5秒遅れてフェードインまたはフェードアウトさせます。 jquery hover関数のmouseover部分にcleartimeoutを追加したので、誰か（偶然に）メニューエリアから離れて0.5秒以内に再度入力するとメニューが閉じることはありません。これはすべてうまくいきますが、問題が発生しました。なぜなら、closeTimeoutは最初のドロップダウンが最初から2番目のドロップダウンに移動すると最初のドロップダウンがクリアされ、両方のドロップダウン要素が開きます。どのようにコードを書き直す必要があるので、すべてのドロップダウンに独自のcloseTimeoutがあると同時に、ホバーオーバー機能のマウスオーバー部分でタイムアウトをクリアすることができます。あなたは要素のdataにタイマーのIDを格納することができ

THX サブ

Answer 1

。その後、

var $this = $(this); 
var closeMenuCallback = function() { 
    $this.removeClass("hover"); 
    $this.removeData("timerid"); 
}; 
var closeTimeout = window.setTimeout(closeMenuCallback, toogleDelay); 
$this.data("timerid", closeTimeout); 

など何かが、私は、これが問題の一部ではありません知っているが、私はこれまでCSSのアプローチが好き

var $this = $(this); 
var closeTimeout = $this.data("timerid"); 
if(closeTimeout) { 
    clearTimeout(closeTimeout); 
    $this.removeData("timerid"); 
} 

Answer 2

でそれを確認してください。

http://webdesignerwall.com/tutorials/css3-dropdown-menu

このため多くの例があります。いくつかのマルチレベルはない。