jQueryのslideDownメニューが動作しない第二ホバーまで

Question

私が持っているもの：

は私がホバーにslideUpとslideDownにjQueryのを使用している基本的なドロップダウンリストを持っています。

は私が必要なもの：

は、私が最初のホバー上のslideDownにあるドロップダウンを必要とし、すべてはその後ホバー。現在、最初のホバーは常に無視されます。 slideDownは、2番目のホバーまで有効になりません。

例：

https://jsfiddle.net/tbc3rkk3/2/

ご注意：

1. を問題は、この例では発生しませんが、コードが劣らず必要なコンテキストを提供する必要があります。
2. 開発中のウェブサイトのライブバージョンにリンクすることはできません。

は、私が試した何：

は

すでにa very similar question on StackOverflowが存在します。

選択された回答は、CSSを使用してulをdisplay:none;に設定していることを示していますが、これは既に私の場合に適用されているものです。

私の質問：

はなぜ/ slideDown最初のホバーが阻害されていますか？

Answer 1

あなたはアニメーションが正しく動作するために、この部分を削除する必要があります。

#language:hover .language_dropdown { 
    display: block; 
} 

See this fiddle

注：あなたはまた、複数のホバー無用のアニメーションを防ぐためにstop()機能を追加することができます。

$("#language").hover(function() { 
    $(".language_dropdown").stop().slideDown("slow"); 
}, function() { 
    $(".language_dropdown").stop().slideUp("slow"); 
}); 

Answer 2

なぜ使用しないでくださいslideToggle？

$("#language").on('click', function() { 
    $(".language_dropdown").slideToggle("slow"); 
}); 

See my JSFiddle。

注：ホバーでこの機能を実行することは推奨されません。これは、より頻繁にトリガーされ、携帯電話やタブレットのユーザーは適切に対処されないためです。クリックがより良いアプローチです。私の更新されたJSFiddleを見てください。