Автоматически скрывать видимые дочерние элементы

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.

Примечание:использование Opera в Windows XP

Answer 1

попробуйте использовать

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

затем, чтобы сделать это видимым

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