Kontrol over undermenu i tree menu
Jeg vil gerne kunne tilføje undermenuer til understående 'tree menu', men det vil ikke rigtig lykkes.Jeg kan godt få menuen til at ekspanderer, men ikke til at trække sig sammen igen ved klik på andre menupunkter a la originalen ...
Originalt script: http://dynamicdrive.com/dynamicindex1/switchmenu.htm
***
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1">
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<title>Tree menu</title>
<style type="text/css">
.menutitle {
cursor:pointer;
margin-bottom:5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
border:1px solid #000000;
}
.menutitleA {
cursor:pointer;
margin-bottom:5px;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
}
.submenu {
margin-bottom:0.5em;
}
</style>
<script language="javascript" type="text/javascript">
if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.submenu{display:none;}\n')
document.write('.submenuA{display:none;}\n')
document.write('</style>\n')
}
function SwitchMenu(obj){
if (document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span");
if(el.style.display != "block"){
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu || submenuA")
ar[i].style.display = "none";
}
el.style.display = "block";
} else {
el.style.display = "none";
}
}
}
</script>
</head>
<body>
<div id="masterdiv">
<div class="menutitle" onclick="SwitchMenu('sub1')">DANMARK</div>
<span class="submenu" id="sub1">
- <a href="#">Menu 1</a><br>
<div class="menutitleA" onclick="SwitchMenu('sub1A')">Level 2</div>
<span class="submenuA" id="sub1A">
<a href="#">Menu 1A</a><br>
<a href="#">Menu 2A</a><br>
<a href="#">Menu 3A</a><br><br>
</span>
- <a href="#">Menu 2</a>
</span>
<div class="menutitle" onclick="SwitchMenu('sub2')">SKOTLAND</div>
<span class="submenu" id="sub2">
- <a href="#">Menu 1</a><br>
- <a href="#">Menu 2</a><br>
- <a href="#">Menu 3</a>
</span>
<div class="menutitle" onclick="SwitchMenu('sub3')">NEW ZEALAND</div>
<span class="submenu" id="sub3">
- <a href="#">Menu 1</a><br>
</span>
<div class="menutitle" onclick="SwitchMenu('sub4')">SYDAFRIKA</div>
<span class="submenu" id="sub4">
- <a href="#">Menu 1</a><br>
- <a href="#">Menu 2</a><br>
- <a href="#">Menu 3</a><br>
- <a href="#">Menu 4</a>
</span>
</div>
</body>
</html>
