javascript - 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
下的所有子 div
3. 点击lnkC1或lnkC2隐藏 单个子div

但似乎我没有让 .children() 正常工作。那么如何解决呢？有什么想法吗？

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/