Hallo,
ich erstelle mir gerade ein TreeMenu mit 3 Ebenen. Die Daten kommen aus einer MySQL-DB:
Das ganze ergibt dann folgende Struktur:
Ich habe nun das Problem, das ich es nicht "gebacken"bekomme, das Menü ordentlich darzustellen. Hier eine kurze Erläuterung was ich meine:
Klickt man auf das TopItem 1 sollen die SubItems 1-1 und 1-2 angezeigt werden. Wird nun auf das TopItem 2 geklickt, sollen die SubItems von 1 ausgeblendet und die SubItems von 2 angezeigt werden. Dies habe ich auch hinbekommen, und zwar so:
Nun habe ich, wie erwähnt, das Menu um eine Ebene erweitert. Wenn jetzt auf das SubItem 1-1 geklickt wird, soll das SubSubItem 1-1-1 angezeigt werden. Wird jetzt erneut auf das SubItem 1-1 geklickt, soll 1-1-1 wieder ausgeblendet werden. Ist das Menu bis zum SubSubItem 1-1-1 "aufgeblättert" und es wird auf das TopItem2 geklickt, sollen alle Sub(Sub)Items von 1 geschlossen und die SubItems von 2 angezeigt werden.
Ich hoffe, dass ich es halbwegs verständlich beschrieben habe. Wie gesagt, für ein Menu mit 2 Ebenen hab ich es hinbekommen. Aber die Erweiterung auf 3 Ebenen bekomme ich nicht hin. Könnt Ihr mir da weiterhelfen?
Gruß,
Arndtinho
ich erstelle mir gerade ein TreeMenu mit 3 Ebenen. Die Daten kommen aus einer MySQL-DB:
Code:
id parent_id name level
1 1 1 0
2 2 2 0
3 3 3 0
4 1 1-1 1
5 1 1-2 1
6 2 2-1 1
7 4 1-1-1 2
Code:
+ 1
| |
| + 1-1
| | |
| | + 1-1-1
| |
| + 1-2
|
+ 2
| |
| + 2-1
|
+ 3
Klickt man auf das TopItem 1 sollen die SubItems 1-1 und 1-2 angezeigt werden. Wird nun auf das TopItem 2 geklickt, sollen die SubItems von 1 ausgeblendet und die SubItems von 2 angezeigt werden. Dies habe ich auch hinbekommen, und zwar so:
Code:
var id = '';
var show = -1;
function showSubItems() {
if( xmlHttp.readyState == 4 ) {
if( xmlHttp.status == 200 ) {
xmlResponse = xmlHttp.responseXML;
xmlDocElement = xmlResponse.documentElement;
mySubItems = xmlDocElement.firstChild.data;
if( show != -1 ) {
document.getElementById( "SubItems_" + show ).innerHTML = '';
}
if( show != id ) {
document.getElementById( "SubItems_" + id ).innerHTML = mySubItems;
show = id;
}
else {
show = -1;
}
}
}
}
Ich hoffe, dass ich es halbwegs verständlich beschrieben habe. Wie gesagt, für ein Menu mit 2 Ebenen hab ich es hinbekommen. Aber die Erweiterung auf 3 Ebenen bekomme ich nicht hin. Könnt Ihr mir da weiterhelfen?
Gruß,
Arndtinho