6
<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链接,显示 下所有子divp
  3. 单击lnkC1lnkC2隐藏单个子 div

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

4

5 回答 5

8

由于父母(#p在你的情况下)有 a display:none,它的孩子将不可见。

你需要先给父母看,

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

(jQuery的链接,非常有帮助)

请尝试摆脱内联样式(一段时间后变得无法管理),尽可能使用类。

你可以在css中上课,

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

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

这只是一个建议:)

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

于 2012-12-07T04:50:05.053 回答
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(); 
});​
于 2012-12-07T04:48:17.450 回答
1

更新小提琴:http: //jsfiddle.net/CBGsF/5/

$("#lnkP").click(function(){
$("#p").show();
$("#p").children().show();
});
  $("#lnkC1").click(function(){
   $("#c1").hide(); 
});
$("#lnkC2").click(function(){
   $("#c2").hide(); 
});​
于 2012-12-07T04:47:33.017 回答
1

父元素设置为 "display":"None" 就是这个问题

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

检查小提琴

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

谢谢

于 2012-12-07T04:47:34.123 回答
0

(代表问题作者发布解决方案)

我想.children()也会搜索不可见的节点。好吧,我错了。

于 2018-07-13T18:06:29.567 回答