Forum « Re: ouvrir et fermer une rubrique cachée »

Forum « Programmation Javascript » (archives)

Re: ouvrir et fermer une rubrique cachée

Envoyé: 11 mars 2006, 7h10 par Oznog

Salut,

Je ne comprends pas ton message « je souhaite qu'une seule rubrique soit ouverte lors du premier chargement »

Aucune n'est ouverte au chargement !! Ta fonction boucle 200 éléments « supposés » de la page et si l'élément existe, tu le cache.

document.getElementById('smenu'+ i).style.display = 'none';

Par contre, de la façon dont est fait ton script, s'il y a une seule erreur, aucun élément n'est caché! C'est sans doute ce qui arrive.

Sache que l'événement « window.onload » indique que la page est entré mais pas n'écessairement interprété. Exemple (je glisse plus bas un script sans PHP plus facile à lire :

Or donc avec ce code, on cache tous les éléments en partant bien que le titre de la fonction porte à confusion. (La fonction boucle tous les éléments à chaque fois pour TOUS les caché et enfin réouvrir le ID transmit s'il y a lieu)

window.onload = montre();

En principe on aurait seulement à faire window.onload = montre('smenu0'); pour tous les caché et ouvrir le premier élément, mais ça ne fonctionne pas.

Une bonne façon de t'assurer que les éléments soit bien interprété est de placer le code tout en bas de la page :


<script>montre('smenu1');</script>
</body>
</html>

De cette façon le « window.onload = montre(); » fermera les rubrique comme il se doit et après avoir interprété et affiché la page, le navigateur tombera sur l'ouverture de la première ribrique (montre('smenu1')).

Voilà ton code épuré du PHP. Note la boucle qui part à zéro (0) au lieu de 1. Une habitude...

<script language="javascript">
function montre(id) {
var d = document.getElementById(id);
for (var i=0; i<=200; i++) {
if (document.getElementById('smenu'+ i)) {
document.getElementById('smenu'+ i).style.display = 'none';
}
}
if(d) {
d.style.display = 'block';
}
}
window.onload = montre();
</script>
</head>
<body>
<dl id="menu">
<dt onClick="javascript:montre('smenu0');">Bodemer Infos de 0</dt>
<dd id="smenu0">
<ul>
<li>000</li>
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
</dd>

<dt onClick="javascript:montre('smenu1');">Bodemer Infos de 1</dt>
<dd id="smenu1">
<ul>
<li>000</li>
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
</dd>

<dt onClick="javascript:montre('smenu2');">Bodemer Infos de 2</dt>
<dd id="smenu2">
<ul>
<li>000</li>
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
</dd>

<dt onClick="javascript:montre('smenu3');">Bodemer Infos de 3</dt>
<dd id="smenu3">
<ul>
<li>000</li>
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
</dd>
</dl>
<script>montre('smenu0');</script>

Ciao
Oznog