Jquery-单击检查li项是否显示：无，然后淡入，否则淡出

请告知。我正在使用jQuery。我是乞丐。我想用fadeIn（onclick）显示项目，然后在第二次单击时用fadeOut隐藏它们。我的代码怎么了？延误很重要

JavaScript:

$(document).ready(function(){ 

    $("#btn").click(function(){ 
        if ($("sub-menu li").css('display') == 'none') {
            $("#navbar li").each(function(i) {
                $(this).delay(100 * i).fadeIn(500);
                    });
        } else {
            $("#navbar li").each(function(i) {
                $(this).delay(100 * i).fadeOut(500);
                     });
        }

    });
 });

标记：

<button id="btn">CLICK ME</button>
<div class="sub-menu" id="dropDownMenu">
    <ul id="navbar">
        <li>ONE</li>
        <li>TWO</li>
        <li>THREE</li>
        <li>FOUR</li>
        <li>FIVE</li>
    </ul>
</div>

$（文档）.ready（函数（）{
$（“#btn”）。单击（函数（）{
如果此处缺少（$（“.sub-menu li”）.css（'display'）=='none'）/
{
$（#navbar li”）。每个（功能（i）{
美元（此）.delay（100*i）.fadeIn（500）；
});
}否则{
$（#navbar li”）。每个（功能（i）{
延迟（100*i）、衰减（500）；
});
}
});
});
。子菜单{
位置：绝对位置；
z指数：1000；
}
.子菜单li{
显示：无；
}

点击我

一个
两个
三
四
五


$（文档）.ready（函数（）{
$（“#btn”）。单击（函数（）{
如果此处缺少（$（“.sub-menu li”）.css（'display'）=='none'）/
{
$（#navbar li”）。每个（功能（i）{
美元（此）.delay（100*i）.fadeIn（500）；
});
}否则{
$（#navbar li”）。每个（功能（i）{
延迟（100*i）、衰减（500）；
});
}
});
});
。子菜单{
位置：绝对位置；
z指数：1000；
}
.子菜单li{
显示：无；
}

点击我

一个
两个
三
四
五

一个更好的方法是使用如下工作方式的
fadeToggle
功能


$（文档）.ready（函数（）{
$（“#btn”）。单击（函数（）{
$（#navbar li”）。每个（功能（i）{
$（此）.延迟（100*i）.衰减切换（500）；
});
});
});
。子菜单{
位置：绝对位置；
z指数：1000；
}
.子菜单li{
显示：无；
}

点击我

一个
两个
三
四
五

一个更好的方法是使用如下工作方式的
fadeToggle
功能


$（文档）.ready（函数（）{
$（“#btn”）。单击（函数（）{
$（#navbar li”）。每个（功能（i）{
$（此）.延迟（100*i）.衰减切换（500）；
});
});
});
。子菜单{
位置：绝对位置；
z指数：1000；
}
.子菜单li{
显示：无；
}

点击我

一个
两个
三
四
五

试试这个


$（文档）.ready（函数（）{
$（“#btn”）。单击（函数（）{
$（“.sub-menu”）.fadeToggle（“慢速”、“线性”）；
});
});
。子菜单{
位置：绝对位置；
z指数：1000；
}
.子菜单{
显示：无；
}

点击我

一个
两个
三
四
五

试试这个


$（文档）.ready（函数（）{
$（“#btn”）。单击（函数（）{
$（“.sub-menu”）.fadeToggle（“慢速”、“线性”）；
});
});
。子菜单{
位置：绝对位置；
z指数：1000；
}
.子菜单{
显示：无；
}

点击我

一个
两个
三
四
五

为此，请使用fadeToggle


$（“#btn”）。单击（函数（）{
$（“#navbar li”）.fadeToggle（1000）//您的切换计算。
});
。子菜单{
位置：绝对位置；
z指数：1000；
}
.子菜单li{
显示：无；
}

点击我

一个
两个
三
四
五

为此，请使用fadeToggle


$（“#btn”）。单击（函数（）{
$（“#navbar li”）.fadeToggle（1000）//您的切换计算。
});
。子菜单{
位置：绝对位置；
z指数：1000；
}
.子菜单li{
显示：无；
}

点击我

一个
两个
三
四
五


$（文档）.ready（函数（）{
$（“#btn”）。单击（函数（）{
$（“#导航栏li”）。切换（“慢速”）
});
});
。子菜单{
位置：绝对位置；
z指数：1000；
}
.子菜单li{
显示：无；
}

点击我

一个
两个
三
四
五


$（文档）.ready（函数（）{
$（“#btn”）。单击（函数（）{
$（“#导航栏li”）。切换（“慢速”）
});
});
。子菜单{
位置：绝对位置；
z指数：1000；
}
.子菜单li{
显示：无；
}

点击我

一个
两个
三
四
五

我已经解决了这个问题。实际上，您错过了以下选择器中的点：

 $("sub-menu li");

将上述内容更改为：

 $(".sub-menu li");

当使用类选择某些元素时，请使用点选择类名之前的元素。看下面的小提琴1.它很好用


$（文档）.ready（函数（）{
$（“#btn”）。单击（函数（）{
if（$（“.sub-menu li”）.css（'display'）='none'）{
$（#navbar li”）。每个（功能（i）{
美元（此）.delay（100*i）.fadeIn（500）；
});
}否则{
$（#navbar li”）。每个（功能（i）{
延迟（100*i）、衰减（500）；
});
}
});
});
。子菜单{
位置：绝对位置；
z指数：1000；
}
.子菜单li{
显示：无；
}
点击我

一个
两个
三
四
五

我已经
 $(".sub-menu li");