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类是：

.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）的目标元素，看起来你可能会使事情复杂化。 {1}}）。
您似乎将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);
})

JQuery bug，slidetoggle（）函数堆栈

1 个答案: