<html>
<head>
<style type="text/css">
</style>
<script>
window.onload = function() {
var array = [{"동물":["토끼","사자","호랑이"],
"꽃":["장미","프리지아","튤립"] ,
"과일":["체리","블루베리","천혜향"]}];
var key=Object.keys(array[0]);//키들 0,1,2
//var key2=array[0][key[0]];//값들
var olTag=document.createElement("ol");
for ( var i in key){
var liTag=document.createElement("li"); //ol태그 안에 li태그를 포문으로 생성
liTag.innerHTML=key[i]; //li태그에 들어갈 값을 셋팅
olTag.appendChild(liTag); //ol태그에 li태그를 자식태그로 만들어줌
liTag.onclick=function(){ //li태그를 클릭하면 그아래 하위 리스트를 만들기 위해 이벤트를 걸어줌
var ad=this.innerHTML;
var olT=document.createElement("ol");
if(this.innerHTML==key[0]||this.innerHTML==key[1]||this.innerHTML==key[2]){
//클릭한 값이 키값들과 같으면 하위 메뉴가 생긴다.
for(var k in key){
var liT=document.createElement("li");
olT.type="i";
liT.innerHTML=array[0][ad][k];
olT.appendChild(liT);
this.appendChild(olT);
}
}else{
this.removeChild(this.lastChild);//클릭한 값이 키값들과 다르면 하위 메뉴가 지워진다.
}
}
}
con.appendChild(olTag);
}
</script>
</head>
<body>
<div id="con"></div>
<div id="con2"></div>
</body>
</html>
'개발하자 > 자바스크립트' 카테고리의 다른 글
| onmouseover,onmouseout (0) | 2015.03.03 |
|---|---|
| 과제2)상단메뉴 클릭시 하위메뉴 나오기 (0) | 2015.03.01 |
| css바꾸기 확장성있는 코드 (0) | 2015.02.28 |
| className 바꾸기 (0) | 2015.02.28 |
| 과제!!깔끔하게 바꾸기 ing (0) | 2015.02.28 |
