Unser Skript läuft gleich zu Beginn ab und soll nun die Unter-Menüs unseres Menübaumes "einklappen", was für uns zunächst mal nichts anderes heisst als "ausblenden".
Wo fangen wir an?
Zunächst soll unser Skript den Menübaum erst einmal finden. Dazu haben wir ihm ja eine Id gegeben, und diese Id haben wir dem Skript als Argument mitgegeben:
Im HTML-Code steht:
<div id="meinmenu">und der Aufruf des Skripts lautet
klappmenu('meinmenu','stufe')
Damit wir mitverfolgen können, was unser Skript denn eigentlich macht, lassen wir es jeweils mit
alert eine Meldung anzeigen. Wir behalten diese Meldung vorläufig noch bei und verwenden sie dazu,
die neuste Erweiterung nachzuprüfen. Und die sieht folgendermassen aus:
function klappmenu(mname,gname) {
ganzesmenu = document.getElementById(mname) ; // auf das Menü zielen
alert("Hallo\n\nwir kümmern uns nun um das Menü in der DIV \""
+ mname + '"\nDie Klassen der Einträge beginnen jeweils mit "' + gname + '"'
+ "\nund das Menü hat " + ganzesmenu.childNodes.length + " Einträge.") ;
}
Zwei Dinge sind hier neu:
ganzesmenu = document.getElementById(mname) ;bewirken wir, dass die ganze
<div id="meinmenu"> in unserem Skript als
ganzesmenu referenziert werden kann. ganzesmenu.childNodes.length nennt uns die Anzahl Elemente, die in
unserem Menü drin stecken: ganzesmenu sagt aus, dass wir uns auf unser Menü konzentrieren,
childNodes sind die "Kinder" dieser DIV, in unserem Fall also sämtliche <a>-Elemente,
die sich da drin tummeln, und length bedeutet, dass deren Anzahl gefragt ist.Ich weiss nicht genau, wie's dir ergeht, aber es kann ganz gut sein, dass die Zahl, die hier ausgewiesen wird, irgendwie nicht stimmt. Viel zu hoch. "Bei mir stimmt's aber", sagst du vielleicht. Sieh dir aber deine Seite mit verschiedenen Browsern an - das ist für Autoren ohnehin empfehlenswert. Wie du gerade am vorliegenden Beispiel siehst, sparst du dir damit einige Überraschungen.
Sehen wir uns also genauer an, woher diese Unterschiede kommen.