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); 
})