nicht angemeldet
Bei Navigation wird wichtige Funktion nicht ausgeführt
Hallo,
wer kann mir bitte helfen?
Ich habe hier (siehe Anhang) eine vertikale Navigation, welche im Grundprinzip auch soweit gut funktioniert. Nur eine mir wchtige Funktion bekomme ich leider nicht hin, weil ich in JavaScript noch nicht so fit bin. In meinem Beispiel sollen, wenn "Menu 1" geöffnet ist und "Menu 2" geöffnet wird die Submenüs von "Menu 1" automatisch verborgen sein. Ich vermute mal, dass mein Fehler hier im body onunload und onload String liegt. Der Fehler ist mir vermutlich beim Verbinden der beiden Parameter im body String unterlaufen. Da ich nicht genau weiß, wie der String richtig geschrieben wird aufgrund meiner zu geringen Kenntnisse in JavaScrpt. Kann mir deshalb bitte jemand mitteilen, wie dieser String mit den beiden Parametern genau geschrieben wird?
Besten Dank für die Unterstützung!
Gruß
Thomas
<html>
<head>
<title>Beispiel</title>
<script type="text/javascript">
function treeMenu_init(menu, data, openSingleNode) {
var array = new Array(0);
if(data != null && data != "") {
array = data.match(/\d+/g);
}
var items = menu.getElementsByTagName("li");
for(var i = 0; i < items.length; i++) {
items[i].onclick = treeMenu_handleClick;
if(!treeMenu_contains(treeMenu_getClasses(items[i]), "treeMenu_opened")
&& items[i].getElementsByTagName("ul").length
+ items[i].getElementsByTagName("ol").length > 0) {
var classes = treeMenu_getClasses(items[i]);
if(array.length > 0 && array[0] == i) {
classes.push("treeMenu_opened")
}
else {
classes.push("treeMenu_closed")
}
items[i].className = classes.join(" ");
}
if(array.length > 0 && array[0] == i) {
array.shift();
}
if(openSingleNode) {
var classes = treeMenu_getClasses(items[i].parentNode);
if(!treeMenu_contains(classes, "treeMenu_openSingleNode")) {
classes.push("treeMenu_openSingleNode");
items[i].parentNode.className = classes.join(" ");
}
}
}
}
function treeMenu_handleClick(event) {
if(event == null) { //Workaround für die fehlenden DOM Eigenschaften im IE
event = window.event;
event.currentTarget = event.srcElement;
while(event.currentTarget.nodeName.toLowerCase() != "li") {
event.currentTarget = event.currentTarget.parentNode;
}
event.cancelBubble = true;
}
else {
event.stopPropagation();
}
var array = treeMenu_getClasses(event.currentTarget);
if(treeMenu_contains(treeMenu_getClasses(event.currentTarget.parentNode), "treeMenu_openSingleNode") && treeMenu_contains(array, "treeMenu_closed")) {
for(var i = 0; i < event.currentTarget.parentNode.childNodes.length; i++) {
var element = event.currentTarget.parentNode.childNodes[i];
if(element.nodeName.toLowerCase() == "li" && element != event.currentTarget){
var array2 = treeMenu_getClasses(element);
for(var j = 0; j < array2.length; j++) {
if(array2[j] == "treeMenu_opened") {
array2[j] = "treeMenu_closed";
}
}
element.className = array2.join(" ");
}
}
}
for(var i = 0; i < array.length; i++) {
if(array[i] == "treeMenu_closed") {
array[i] = "treeMenu_opened";
}
else if(array[i] == "treeMenu_opened") {
array[i] = "treeMenu_closed"
}
}
event.currentTarget.className = array.join(" ");
}
function treeMenu_getClasses(element) {
if(element.className) {
return element.className.match(/[^ \t\n\r]+/g);
}
else {
return new Array(0);
}
}
function treeMenu_contains(array, element) {
for(var i = 0; i < array.length; i++) {
if(array[i] == element) {
return true;
}
}
return false;
}
function treeMenu_store(menu) {
var result = new Array();;
var items = menu.getElementsByTagName("li");
for(var i = 0; i < items.length; i++) {
if(treeMenu_contains(treeMenu_getClasses(items[i]), "treeMenu_opened")) {
result.push(i);
}
}
return result.join(" ");
}
</script>
<style type="text/css">
li.treeMenu_opened ul {
display: block;
}
li.treeMenu_closed ul {
display: none;
}
</style>
<body onunload="window.name = treeMenu_store(document.getElementById('menu'))"
onload="treeMenu_init(document.getElementById('menu'), window.name)">
<ul id="menu">
<li><a href="menu1.html">Menu 1</a>
<ul>
<li><a href="menu1a.html">Menu 1a</a></li>
<li><a href="menu1b.html">Menu 1b</a></li>
</ul>
</li>
<li><a href="menu2.html">Menu 2</a>
<ul>
<li><a href="menu2a.html">Menu 2a</a></li>
<li><a href="menu2b.html">Menu 2b</a></li>
</ul>
</li>
</ul>
</body>
</html>