JQueryのバグ、slidetoggle（）関数のスタック

Question

slideToggle() jQuery関数に奇妙な問題があります。私は何が壊れているのか（修復しているのか）分かっていませんが、時にはホバー上に通常は隠されているdivを表示し、div全体が大きくなってしまうことがあります。前のjQueryコードをコピーして修復できましたが、今は何もしません。私はいくつかのjQueryコードをdivに埋め込んでいるので、それらのうちのほんの少しがホバリングで開いたままになります。

コードは以下のようになります。

$("#colorstoggle").hover(function(e) { 
    $("#red").stop(true, false).slideToggle(200); 
    $("#yellow").stop(true, false).slideToggle(200); 
    $("#blue").stop(true, false).slideToggle(200); 
    $("#green").stop(true, false).slideToggle(200); 
    $("#purple").stop(true, false).slideToggle(200); 
}) 

$("#red").hover(function(e) { 
    $("#red").stop(true, false).slideToggle(); 
    $("#yellow").stop(true, false).slideToggle(); 
    $("#blue").stop(true, false).slideToggle(); 
    $("#green").stop(true, false).slideToggle(); 
    $("#purple").stop(true, false).slideToggle(); 
}) 

のように...

HTMLはリストである：

<ul class="navigation"> 
    <li class="nav-item" id="str1but">Podsumowanie</li> 
    <li class="nav-item" id="str2but">Dane</li> 
    <li class="nav-item" id="str3but">Wykres</li> 
    <li class="nav-item" id="str4but">Autorzy</li> 
    <li class="nav-item" id="colorstoggle"> 
    Kolor:</li> 
    <li class="nav-item" id="yellow" style="color:yellow">kolor żółty</li> 
    <li class="nav-item" id="blue" style="color:blue">kolor niebieski</li> 
    <li class="nav-item" id="red" style="color:red">kolor czerwony</li> 
    <li class="nav-item" id="purple" style="color:purple">kolor fioletowy</li> 
    <li class="nav-item" id="green" style="color:green">kolor zielony</li> 
</ul> 

とNAV-項目クラスです：

.nav-item { 
    width: 200px; 
    border-top: 1px solid #111; 
    border-bottom: 1px solid #111; 
    display: block; 
    padding: 0.7em; 
    color: white; 
    font-size: 1.2em; 
    text-decoration: none; 
} 

Answer 1

ここにはがありますのコードが実行され、の背景には、展開を示すためにdivが表示されます。

親要素が展開されるのは正常です。デフォルトでは、HTMLブロックレベルの要素は展開され、要素内に収まるようになります。この場合、liは拡大/縮小しているので、ulはそれを拡大/縮小します。

コード

それはあなたのコードを達成しようとしているかは明らかではありませんように、それは、具体的な支援を提供するのは難しいです。

• あなたが潜在的に同じこと（slideToggle要素の同じセット）と1つのコントロール（#red）を行うために2つのコントロールを提供することで、物事を複雑にしているように見えますが、次のとおりです。あなたがが検討するかもしれないがいくつかあります最初のターゲット要素（#colorstoggle）。

• あなたは色に#colorstoggleの子としてliの項目を参照しているようにそれはまた見えますので、あなたは別に、これらの要素が含まれていると混乱を減らすためにネストされたリストの使用を検討できます。 ここにはdemoがあります。

• jQueryセレクタをグループ化することによって、繰り返し使用されるコードの量を減らすこともできます。

Using multiple selectors in jQuery

$("#colorstoggle").hover(function(e) { 
    $("#red").stop(true, false).slideToggle(200); 
    $("#yellow").stop(true, false).slideToggle(200); 
    $("#blue").stop(true, false).slideToggle(200); 
    $("#green").stop(true, false).slideToggle(200); 
    $("#purple").stop(true, false).slideToggle(200); 
}) 

に削減することができる：あなたがHTMLを追加でき

$("#colorstoggle").hover(function(e) { 
    $("#red, #yellow, #blue, #green, #purple").stop(true, false).slideToggle(200); 
})