Nach all den Vorarbeiten, die wir geleistet haben, sollten wir nun ausklappen können, was auszuklappen
ist. Technisch machen wir das, indem wir den Elementen, die wir sehen wollen, den display-Wert
block geben und denen, die wir nicht sehen wollen, den Wert none. Letzteres haben wir ja
in der Funktion zuklappen schon gemacht, und es gibt da nichts Neues mehr zu lernen.
Es bleibt also ein wenig Programmlogik nachzuvollziehen. Angenommen, wir zeigen mit der Maus auf den
Eintrag mit der Id 3.1.2. - welche Menüs müssten dann sichtbar sein?
| Level | anzeigen |
|---|---|
| 1 | alle |
| 2 | alle, die mit "3." anfangen |
| 3 | alle, die mit "3.1." anfangen |
| 4 | alle, die mit "3.1.2." anfangen |
| höhere | keine |
Die Id des eigenen Elementes haben wir als wodenn.id ohnehin zur Verfügung.
Aus ihrer Länge ergibt sich auch gleich die Stufe des eigenen Elementes. (Diese könnten wir
natürlich auch aus der class des Elementes herausfinden.)
Danach gehen wir eben wieder alle Kinder unseres Menüs
durch (wie beim erstmaligen Zuklappen) und stellen ihre display-Werte richtig.
function aufklappen(mev) {
if(mev) var wodenn = mev.target ; // Browser-abhängig
else var wodenn = window.event.srcElement ; // das Element ermitteln
zeig_stufe = wodenn.id.length / 2 + 1 ;
ganzesmenu = document.getElementById(das_menu) ;
for(i=0 ; i< ganzesmenu.childNodes.length ; i++) { // alle Kinder durchsuchen
dieseskind = ganzesmenu.childNodes[i] ; // nächstes Kind aufsuchen
if(dieseskind.className) { // hat's überhaupt eine Class?
if(dieseskind.className.substr(0,die_class.length) == die_class) {
diesestufe = dieseskind.className.substr(die_class.length,1) ; // unsere Stufe
if(diesestufe > 1) { // für Level 1 tun wir eh nix
if(diesestufe > zeig_stufe) { // und zu hohe Levels...
dieseskind.style.display = "none" ; // blenden wir alle aus.
}
else { // alle andern Menüzeilen müssen
inx = 0 ; // mit unserem Pfad übereinstimmen
for(ix=1 ; ix<diesestufe ; ix++) { // (z.B. "3.1." kann angezeigt
inx = wodenn.id.indexOf('.',inx) + 1 ; // werden, wenn wir "3.1.2." sind.
}
if(dieseskind.id.indexOf(wodenn.id.substr(0,inx)) == 0) {
dieseskind.style.display = "block"
}
else dieseskind.style.display = "none" ;
}
}
}
}
}
}
Hier kannst du's ausprobieren.
Der Anfang dieser Funktion kommt uns sicher bekannt vor: es ist, was wir vom Zuklappen her schon kennen.
Wir gehen da alle Kinder-Elemente des Menüs durch, interessieren uns nur für solche, die eine Class haben,
unter denen nur solche, die unsere Menü-Class haben, und von denen ermitteln wir die Menü-Stufe, welche sich
ja im letzten Zeichen des Class-Namens befindet. zeig_stufe haben wir auf einen Wert eins höher
als unsere gegenwärtige Stufe gesetzt, und was noch höher ist, wird alles ausgeblendet.
In dem grossen else-Ast werden nun die Ids aller Menü-Elemente mit der Id des Maus-Elementes
verglichen. Dazu zählen wir in der Id des Maus-Elements soviel Punkte ab, wie der Menustufe des zu vergleichenden
Elements entspricht, und in dieser Länge vergleichen wir mit der Id des Maus-Elements. (Das klingt etwas
verwirrend, ist aber vielleicht auch anhand des im Kommentar genannten Beispiels zu verstehen.)