Folde menu
Jeg har fundet fundet et script på nettet.Jeg har prøvet at lave en funktion der kan folde alle punkter helt ud og en der kan lukke alt.
Er der nogen der kan gennemskue hvordan man kunne gribe det an?
Her er det:
<html>
<head>
<style type="text/css">
#tree, #tree ul {
list-style: none;
margin: 4px;
padding: 4px;
width: 200px;
}
#tree ul {
position: relative;
display: none;
}
#tree li {
float: left;
width: 200px;
}
#tree li img {
width: 10px;
height: 10px;
}
</style>
<script type="text/javascript">
var menu = new Array();
menu[0] = new Array(3, 0, "FROZEN");
menu[1] = new Array(6, 0, "NON FOODS");
menu[2] = new Array(7, 0, "SNACKING");
menu[3] = new Array(512, 0, "Grocery");
menu[4] = new Array(712, 0, "Chilled");
menu[5] = new Array(713, 0, "Non - Alcoholic Drinks");
menu[6] = new Array(11, 3, "DESSERTS");
menu[7] = new Array(12, 3, "MEAT");
menu[8] = new Array(13, 3, "PREPARED FOODS");
menu[9] = new Array(15, 3, "SEAFOOD");
menu[10] = new Array(16, 3, "VEGETABLES");
menu[11] = new Array(513, 3, "Retail Products");
menu[12] = new Array(714, 6, "Non Foods Cleaning");
menu[13] = new Array(715, 6, "Non Foods Consumables");
menu[14] = new Array(30, 7, "BISCUITS");
menu[15] = new Array(32, 7, "CONFECTIONERY");
menu[16] = new Array(1000, 0, "MY TEST");
menu[17] = new Array(1001, 1000, "mt-1");
menu[18] = new Array(1002, 1001, "mt-1-1");
menu[19] = new Array(1003, 1002, "mt-1-1-1");
menu[20] = new Array(1004, 1003, "mt-1-1-1-1");
//window.onload = initMenu;
function initMenu(menu)
{
var obj = document.getElementById("tree");
// first, fill the tree
for (var i = 0, n = menu.length; i < n; i ++)
{
var currParts = new Array();
currParts = menu[i];
var parNode, subMenu;
if (currParts[1] == "0")
subMenu = obj;
else
{
parNode = document.getElementById(currParts[1]);
subMenu = parNode.getElementsByTagName("ul")[0];
}
if (!subMenu)
{
subMenu = document.createElement("ul");
// add the image
var theLink = parNode.getElementsByTagName("a")[0];
var theImg = document.createElement("img");
theImg.src = "plus.jpeg";
parNode.insertBefore(theImg, theLink);
parNode.appendChild(subMenu);
}
var newLi = document.createElement("li");
newLi.id = currParts[0];
var newLink = document.createElement("a");
newLink.href = "#";
newLink.innerHTML = currParts[2];
newLi.appendChild(newLink);
subMenu.appendChild(newLi);
}
// now set up the expand & collapse behavior
var lis = obj.getElementsByTagName("li");
for (var i = 0, n = lis.length; i < n; i ++)
lis[i].onclick = toggle;
var uls = obj.getElementsByTagName("ul");
for (var i = 0, n = uls.length; i < n; i ++)
uls[i].open = false;
}
function toggle(e)
{
var subMenu = this.getElementsByTagName("ul")[0];
var theImg = this.getElementsByTagName("img")[0];
if (subMenu)
{
subMenu.style.display = subMenu.open? "none": "block";
theImg.src = subMenu.open? "plus.jpeg": "minus.jpeg";
subMenu.open = !subMenu.open;
}
if (window.event)
event.cancelBubble = true;
else
e.stopPropagation();
return false;
}
</script>
</head>
<body onload="initMenu(menu)">
<ul id="tree"></ul>
</body>
</html>
