Auto-nascondere gli elementi visibili bambini

Question

Sto facendo un po 'di prototipazione utilizzando HTML, JavaScript e CSS. Il prototipo è per una suite di applicazioni per l'esecuzione su un dispositivo mobile. Ogni schermata è costruito in esso la propria DIV. C'è una schermata iniziale, diverse schermate off che, eccetera.

L'utente deve essere in grado di scaricare fuori alla schermata iniziale in qualsiasi momento. Ci sono alcuni elementi in ciascuna schermata che sono visibili per impostazione predefinita, e altri elementi che sono specificamente realizzati visibile, basato fuori determinate azioni.

Il problema che sto avendo è che quando si imposta una delle div schermo per nascosto, posso ancora vedere gli elementi figlio di quel DIV che ho specificamente reso visibile. Capisco che ci sia preesistente codice che nasconde tutti gli elementi figlio di un DIV bersaglio, ma voglio solo per nascondere i di uno che ho fatto visibile.

C'è codice là fuori, che mi aiuterà con questo? Posso concettualizzare un modo ho potuto programmare intorno a questo, ma io non voglio reinventare la ruota.

HTML di esempio:

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

Esempio JavaScript:

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

Dopo aver fatto questo esempio, posso ancora vedere childElement.

Nota: usando Opera su Windows XP

Answer 1

provare a utilizzare

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

quindi per renderlo visibile

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