如何在jQuery中显示所有子节点

Question

<a href="javascript:(void);" id="lnkP">show all children</a>
<a href="javascript:(void);" id="lnkC1">hide child 1</a>
<a href="javascript:(void);" id="lnkC2">hide child 2</a>

<div id="p" style="display:none;">
<div id="c1">child 1</div>
<div id="c2">child 1</div>...
</div>​

$("#lnkP").click(function(){
    $("#p").children().show(); //seems there's a problem here...
});
$("#lnkC1").click(function(){
   $("#c1").hide(); 
});
$("#lnkC2").click(function(){
   $("#c2").hide(); 
});​

jsFiddle: http://jsfiddle.net/CBGsF/1/

我试图做的是:

1. p 是一个父容器
2. 点击 show all children 链接，显示在 p 下的所有子 divs
3. 点击 lnkC1 或 lnkC2 隐藏单个子 div

但似乎我没有正确使用 .children()。那么该如何修复呢？有什么想法吗？

- woodykiddy

---

由于jQuery选择器基本上是带有一些额外自定义的CSS选择器，所以这样做可以吗？https://dev59.com/n2445IYBdhLWcg3wWI6L - Alvin Wong

Answer 1

由于父元素（在您的情况下是#p）具有display:none属性，所以它的子元素将不可见。

您需要先显示父元素，

$("#p")
.show()
.children().show();

(jQuery的链式语法非常有用)

请尽可能摒弃内联样式（时间一长会变得难以管理），尽量使用类。

你可以在CSS中定义一个类，

.displayNone
{
    display: none;
} 
.displayBlock
{
   display: block;
}

然后使用jQuery的方法.removeClass()、.addClass()或.toggleClass()来显示/隐藏您的元素。

这只是一个建议 :)

测试链接：http://jsfiddle.net/CBGsF/8/

- painotpi

Answer 2

你需要同时显示 #p

更新后的代码片段: http://jsfiddle.net/CBGsF/7/

$("#lnkP").click(function(){
    $("#p").show().children().show(); //Add show() before children.show call
});
$("#lnkC1").click(function(){
   $("#c1").hide(); 
});
$("#lnkC2").click(function(){
   $("#c2").hide(); 
});​

- KingKongFrog

Answer 3

更新的代码片段：http://jsfiddle.net/CBGsF/5/

$("#lnkP").click(function(){
$("#p").show();
$("#p").children().show();
});
  $("#lnkC1").click(function(){
   $("#c1").hide(); 
});
$("#lnkC2").click(function(){
   $("#c2").hide(); 
});​

- Anujith

Answer 4

父元素被设置为"display":"None"，这就是问题所在。

$("#p").css("display","block"); //is required in show all anchor click

请检查代码片段

http://jsfiddle.net/CBGsF/6/

谢谢

- Sridhar Narasimhan

Answer 5

（代表问题作者发布的解决方案）

我以为.children()也会搜索不可见节点。嗯，我错了。

- halfer