javascript - jQuery.children 也选择父级

Question

我有以下 HTML；

<div id="pic_options_container">
  <div id="pic_options_header">header text</div>
  <div id="pic_options_org"></div>
  <div id="pic_options_preview"><img id="imgPreview" src="" /></div></div>
  <div style="clear:both;"></div>
</div>

我想要实现的是；单击 pic_options_container 时，该 div 的子项应隐藏。但是， pic_options_container 本身也会被隐藏。

$('#pic_options_container').click(function () {
    $(this).children().hide();
});

任何人都知道解决方案或告诉我我做错了什么？

Answer 1

你确定它被隐藏了？我敢打赌，它只是被“清空”了，然后折叠到 0 宽度和高度。

看到这个：http: //jsfiddle.net/SmSGS/

Answer 2

你可以试试：

$('#pic_options_container').click(function () {
    $(this).hide(); // to hide container it self, not chldren
});

演示

但是要隐藏孩子和两个容器：

$('#pic_options_container').click(function () {
    $(this).children().hide().end().hide(); // to hide container it self
});

演示

关于无效标记

<div id="pic_options_preview"><img id="imgPreview" src="" /></div></div>

最后一个额外的关闭</div>，纠正那个。

Answer 3

如果您的 'pic_options_container' 容器没有子容器或被隐藏，您必须提供高度和宽度才能看到它。