自动隐藏可见的子元素

Question

我正在做一些原型使用超文本标记语言，JavaScript和CSS。原型是用于在移动设备上运行的应用程序套件。每个屏幕都内置在它自己的DIV中。有一个主屏幕，有几个屏幕，等等。

用户应该能够在任何时候转储到主屏幕。默认情况下，每个屏幕中的某些元素是可见的，而其他元素是根据某些操作特别设置为可见的。

我遇到的问题是，当将其中一个屏幕DIV设置为隐藏时，我仍然可以看到我特别设置为可见的那个DIV的子元素。我知道有一些预先存在的代码可以隐藏目标DIV的所有子元素，但我只想隐藏我设置为可见的那一个。

有没有代码可以帮助我做到这一点？我可以概念化一种我可以围绕这一点编程的方法，但我不想重新发明轮子。

示例HTML：

<div id="parentDiv">
  <span id="childElement" style="visibility:hidden"></span>
</div>

示例JavaScript：

$('childElement').style.visibility = 'visible';
$('parentDiv').style.visibility = 'hidden';

完成此示例后，我仍然可以看到childElement。

注:在Windows XP上使用Opera

Answer 1

尝试使用

$('parentDiv').style.display = "none";

然后使其可见

$('parentDiv').style.display = "block"