[JS] Uitklapmenu fout?

[Verwijderd]

Mensen,

Ik gebruik een combinatie van een lijst met een javascript om een menu te maken. Het idee is een simpel menu welke uitklapt wanneer je op een onderdeel klikt welke sub items heeft.

In firefox werkt dit perfect. Nu heb ik het net ook getest in IE, en dan klapt hij nog extra regels uit zodra een bepaalde pagina is geopend. (Door het detecteren van welke pagina open is door de php.)

Ik hoop dat iemand hier wijs uit wordt? Of wellicht ene alternatief menu heeft dat op dezelfde manier werkt?

Opmerking: Het lijkt wel alsof hij de menu uitklapt in een loop totdat de document.getElementById is bereikt?

De codes:
Menu op de pagina:

HTML:

<!-- Menu -->
<ul id="Menu_Hoofd">
<li><a href="deberg.php?pagina=page_welkom" target="_self" class="Menu_Link">Welkom</a></li>
<HR />
<li><a href="#" target="_self" class="Menu_Link">Het Trefpunt</a></li>

<li><a href="#" target="_self" class="Menu_Link">sv de Berg</a></li>
<HR />
<li><a href="javascript:toggle('Activiteiten')" class="Menu_Link">Activiteiten</a></li>
  <li id="Activiteiten" class="Menu_Sub">

    - <a href="deberg.php?pagina=page_activiteiten" target="_self" class="Menu_Link">Biljarten</a><BR />
    - <a href="deberg.php?pagina=page_activiteiten" target="_self" class="Menu_Link">Poolen</a><BR />
    - <a href="deberg.php?pagina=page_activiteiten" target="_self" class="Menu_Link">Zwemmen</a><BR />

  </li>

<li><a href="#" target="_self" class="Menu_Link">Agenda</a></li>

<li><a href="#" target="_self" class="Menu_Link">Foto's</a></li>

<li><a href="javascript:toggle('Spelletjes')" class="Menu_Link">Spelletjes</a></li>
  <li id="Spelletjes" class="Menu_Sub">

    - <a href="deberg.php?pagina=page_spelletjes" target="_self" class="Menu_Link">Game 1</a><BR />
    - <a href="deberg.php?pagina=page_spelletjes" target="_self" class="Menu_Link">Game 2</a><BR />
    - <a href="deberg.php?pagina=page_spelletjes" target="_self" class="Menu_Link">Game 3</a><BR />

  </li>

<li><a href="javascript:toggle('Nieuws')" class="Menu_Link">Nieuws</a></li>
  <li id="Nieuws" class="Menu_Sub">

    - <a href="deberg.php?pagina=page_nieuws" target="_self" class="Menu_Link">Trefpunt</a><BR />
    - <a href="deberg.php?pagina=page_nieuws" target="_self" class="Menu_Link">Speeltuin</a><BR />
    - <a href="deberg.php?pagina=page_nieuws" target="_self" class="Menu_Link">Overig</a><BR />

  </li>

<li><a href="#" target="_self" class="Menu_Link">Contact</a></li>

<li><a href="#" target="_self" class="Menu_Link">Inschrijven</a></li>

</ul>
<!-- End Menu -->

Javascript onder aan de pagina:

JavaScript:

<script type="text/javascript"> 

document.getElementById('Menu_Hoofd').style.listStyle="none";

document.getElementById('Activiteiten').style.display="<?php if($sPagina == "page_activiteiten") { echo("Activiteiten"); } else { echo("none"); } ?>"; // collapse list 
document.getElementById('Spelletjes').style.display="<?php if($sPagina == "page_spelletjes") { echo("Spelletjes"); } else { echo("none"); } ?>"; // collapse list 
document.getElementById('Nieuws').style.display="<?php if($sPagina == "page_nieuws") { echo("Nieuws"); } else { echo("none"); } ?>"; // collapse list 

function toggle(list){ 
var listElementStyle=document.getElementById(list).style; 
if (listElementStyle.display="none"){ 
listElementStyle.display="block"; 
 }
else { listElementStyle.display="none"; } 
}

</script>

[HuHu]

Je kunt geen PHP in JavaScript verwerken hè. PHP is server-side, maar JavaScript is client-side. Dus als dat JavaScript wat je plaatst de uitvoer is die je in je browser te zien krijgt, dan gaat het sowieso niet goed. Dus plaats even de correcte JavaScript, zoals die in je browser wordt getoond.

En "style.display = 'Activiteiten'" bestaat natuurlijk ook niet. Dat moet zijn "style.display = 'block'" of iets dergelijks.

Dat PHP stuk kun je beter schrijven als:

PHP:

echo $sPagina == 'page_activiteiten' ? 'block' : 'none';

[Verwijderd]

De codes komen vanuit mijn editor vanaf mijn pc.

Dit is de code uit de ie bron:

JavaScript:

<script type="text/javascript"> 

document.getElementById('Menu_Hoofd').style.listStyle="none";

document.getElementById('Activiteiten').style.display="none"; // collapse list 
document.getElementById('Spelletjes').style.display="Spelletjes"; // collapse list 
document.getElementById('Nieuws').style.display="none"; // collapse list 

function toggle(list){ 
var listElementStyle=document.getElementById(list).style; 
if (listElementStyle.display="none"){ 
listElementStyle.display="block"; 
 }
else { listElementStyle.display="none"; } 
}

</script>

De subgroep Spelletjes zou nu open moeten blijven staan. In firefox werkt dat ook gewoon.
Echter in ie, klapt hij nu spelletjes open, maar ook diegene eronder: Nieuws.
Laat ik de bovenste open klappen, dan klapt hij ze alle 3 open.
Laat ik alleen Nieuws open klappen, dan klapt ook alleen nieuws open.

(Ik probeer nog even de code aan te passen op tip van voorgaande bericht)

[Bosmonster]

code:

style.display="Spelletjes";

display: 'Spelletjes' bestaat niet

[Verwijderd]

HuHu:
Met jouw stukje php werkt het perfect.
Ik ben geen held in JavaScript, dus ik probeer altijd maar wat!


In Firefox werkte het trouwens wel!

Thx,

[ Voor 16% gewijzigd door Verwijderd op 20-04-2009 11:44 ]

[Bosmonster]

Tja, de browser is redelijk vrij in het interpreteren van foute CSS-waarden. Daar kan dus wel verschil in zitten tussen browsers als je dat soort fouten maakt.