JQuery 切换效果和 HTML 列表

Question

我想在按下用 css 制作的按钮时创建效果。这是我的列表结构，我想逐项使用 fadeToggle，但我不能。

<div id="nav" >

    <span class="nav_btn"></span>   

        <ul id="list">

            <a href=""><li id="1">1</li></a>
            <a href=""><li id="2">2</li></a>
            <a href=""><li id="3">3</li></a>
            <a href=""><li id="4">4</li></a>
            <a href=""><li id="5">5</li></a>

        </ul>
    </div>
</div>

此代码有效，但它适用于所有列表元素，换句话说，它适用于 ul 元素。

$("span.nav_btn").click(function() {

$("ul#list").fadeToggle("4000");

})

我想知道为什么该代码不起作用：

$("span.nav_btn").click(function() {
$("li#1").fadeToggle("500");
$("li#2").fadeToggle("1000");
$("li#3").fadeToggle("1500");
$("li#4").fadeToggle("2000");
$("li#5").fadeToggle("2500");
})

Answer 1

从持续时间中删除引号（我相信）是您想要的。这是因为您使用引号将值作为字符串传递。通过删除它们，您正确地传递了一个数字。

使用：

$("li#1").fadeToggle(500);
$("li#2").fadeToggle(1000);
$("li#3").fadeToggle(1500);
$("li#4").fadeToggle(2000);
$("li#5").fadeToggle(2500);

https://jsfiddle.net/d94ur5yc/

JQuery 切换效果和 HTML 列表

JQuery Toggle Effect and HTML List

jquery

list

toggle