jQuery bug，slidetoggle（）函數堆棧

Question

我有一個奇怪的問題，slideToggle() jQuery函數。我不知道我打破了什麼（也沒有修復），但有時在懸停時，它會顯示通常隱藏的div，有時會堆積起來，以便整個div變得越來越大。我能夠複製之前的jQuery代碼並修復它，但現在它什麼都不做。我在我的div中嵌入了幾個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); 
}) 

$("#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-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

這是Fiddle您的代碼正在運行，並顯示ul的背景展示了正在擴展的div。

父元素擴展是正常的，因爲默認情況下，HTML塊級元素將擴展以適應其中的元素。在這種情況下，li正在擴大/收縮，所以ul擴大/合同。

代碼

很難提供具體的幫助，因爲目前還不清楚你想達到你的代碼是什麼。有幾件事情你可能會雖然考慮：

• 它看起來像你可能通過提供2個控件做同樣的事情（的slideToggle同組元素）和一個控制（#red）複雜的事情是第一個目標元素（#colorstoggle）。

• 它也像你引用的顏色li項目作爲#colorstoggle孩子，所以，你可以考慮使用一個嵌套列表分別包含這些內容，並減少混亂。 這是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); 
}) 

可以減少到：

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