侧边栏展开(数组练习)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul id="ul">
<li>
<h3></h3>
<ul id="sulblist1" style="display: none"></ul>
<h3></h3>
<ul id="sulblist2" style="display: none"></ul>
<h3></h3>
<ul id="sulblist3" style="display: none"></ul>
</li>
</ul>
<script>
var data=[
["图片","我的图片","公用图片"],
["视频","我的视频","公用视频"],
["文档","我的文档","公用文档"]
];
var title=document.getElementsByTagName("h3");
var lists=document.getElementsByTagName("li");
var sulblist=lists[0].getElementsByTagName("ul");

for(var i=0;i<data.length;i++){
title[i].innerHTML=data[i][0];
for(var j=1;j<data[i].length;j++){
sulblist[i].innerHTML+="<li>" + data[i][j] +"</li>";
}
title[i].index=i;
title[i].onclick=function(){

if(sulblist[this.index].style.display=="none"){
sulblist[this.index].style.display="block";
}
else{
sulblist[this.index].style.display="none";
}
}
}

</script>
</body>
</html>

posted @ 2017-04-19 23:21  非凡。  阅读(165)  评论(0编辑  收藏  举报