自动隐藏可见子元素

Question

我正在使用HTML，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"