JavaScript Folding Menu Tree

This is a JavaScript function for menu tree. I would like to add more sub-menu in it, not only one sub-menu. What's x.all[0] and x.all[2]?

var head="display:''"  
img1=new Image()  
img1.src="fold.gif"  
img2=new Image()  
img2.src="open.gif"  

function change(){  
if(!document.all)  
return  
if (event.srcElement.id=="folding"){  
var x=event.srcElement.parentElement  
if (x.all[2].style.display=="none"){  
x.all[0].src="open.gif"  
x.all[2].style.display=''  
alert(x.all[2].name )开发者_如何转开发  
}  
else{  
x.all[0].src="fold.gif"  
x.all[2].style.display="none"  
}  

}  
document.onclick=change  

all is a collection of child elements belonging to a particular element. document.all returns all elements for a document. It is an IE only feature and will not work in other browsers.

In your code, x is event.srcElement.parentElement, so it's all property would be all the child elements belonging to that parent element. The [0] will return the first element in the collection and [2] will return the third element in the collection.

As mentioned before, this code will only work in Internet Explorer, so you should explore other cross browser methods to achieve what you're trying to do if you want better browser compatibility.