fadeIn（）使用jQuery隐藏列表项目

Question

我有一个无序列表，其li s是不可见的（display:none）开头。

我想使一个特定的li可见与JS功能。我怎样才能做到这一点？

我试过$("#my-list li:nth-child(1)").fadeIn()但只有在ul开始时才有效。

这里是我的代码：

ul.hide > li { 
    display: none; 
} 

<ul class="hide" id="my-list"> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
</ul> 

我试图回答this question。随意尝试一下吧！

Answer 1

就像bdares说的那样，一个看不见的元素不能有一个可见的孩子。所以你对代码的描述是真的：ul必须首先可见。

看着html代码，你可能只需删除class="hide"这将使ul可见。

但是，如果你不能这样做，另一种方法是使用Javascript来使飞行中的UI可见。取而代之的只是：

$("#my-list li:nth-child(1)").fadeIn(); 

做

$("#my-list").show(); 
$("#my-list li:nth-child(1)").fadeIn(); 

Answer 2

用这样的方式：

$("#my-list").show(0).children("li:nth-child(1)").fadeIn();

$("#my-list").show().children("li:nth-child(1)").fadeIn();

让我解释一下你为什么 .show(0)比 .show()更好。当你使用 .show()时，它给出了一个转换，它简化了不需要的DOM元素。这就像展示了一个隐藏的元素并且顺利隐藏它，这是不被接受的。