可折叠的标题栏_CSS

<script language="javascript">
function change(){
var oUl = document.getElementById("listUL");
var aLi = oUl.childNodes;	//子元素(这里只能取到第一层，希望可以找出所有的，并把MyShow切到MyHide)
	//子元素
for(var i=0;i<aLi.length;i++){
if(aLi[i].className == "myShow1")
aLi[i].className = "myHide1";
}


//通过父元素li，找到兄弟元素ul
var oSecondDiv = this.parentNode.getElementsByTagName("div")[0];
//CSS交替更换来实现显、隐
if(oSecondDiv.className == "myHide1")
oSecondDiv.className = "myShow1";
else
oSecondDiv.className = "myHide1";
}
window.onload = function(){
var oUl = document.getElementById("listUL");
var aLi = oUl.childNodes;	//子元素
var oA;
var oB;  
for(var i=0;i<aLi.length;i++){
//如果子元素为li，且这个li有子菜单ul
if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("div").length){
oB = aLi[i].firstChild;	//找到超链接
oB.onclick = change;	//动态添加点击函数


}
}
}
</script>