自动隐藏可见子元素

我正在使用HTML、JavaScript和CSS进行一些原型设计。原型用于在移动设备上运行应用程序套件。每个屏幕都建在自己的分区中。有一个主屏幕,几个屏幕关闭,等等。

用户应该能够在任何时候转储到主屏幕。在每个屏幕中,默认情况下都有一些可见的元素,以及基于某些操作而专门使其可见的其他元素。

我现在遇到的问题是,当将其中一个屏幕分隔符设置为隐藏时,我仍然可以看到该分隔符的子元素,这些元素是我特别设置为可见的。我知道已有的代码隐藏了目标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