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
});

<强> DEMO

但隐藏儿童和两个容器：

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

<强> DEMO

关于无效标记

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

最后额外关闭</div>，更正。

Answer 3

你必须提供高度和宽度来查看你的'pic_options_container'容器，如果它没有儿童或被隐藏。

jQuery.children也选择了父级

3 个答案:

关于无效标记