이 예제는 다른 사람의 예제를 기반으로 한 것으로 밝혀졌습니다. 그 사람은 무한 접기 메뉴를 작성하기 위해 미리 감사드립니다! 나중에 몇 가지 간단한 수정을 하고 원래 예제를 객체 지향 접근 방식으로 변경했습니다. 예제의 작은 확장 및 닫힌 아이콘은 효과를 더 잘 보기 위해 직접 다시 추가할 수 있습니다. 코드 복사 코드는 다음과 같습니다. <머리> JS CSS에 대한 다양한 형식의 전시 <br>body{margin:0;padding:0;font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif;} <br>ul,li,{margin:0;padding:0;} <br>ul {목록 스타일:없음;} <br>a{텍스트 장식: 없음;} <br>#root{margin:10px;width:200px;overflow:hidden;} <br>#root li{line-height: 25px;} <br>#root .rem{padding-left:16px;} <br>#root .add{배경:url(treeico.gif) -4px -31px no-repeat;} <br>#root .ren {배경:url(treeico.gif) -4px -7px 반복 없음;} <br>#root li a{color:#666666;padding-left:5px;outline:none;blr:expression(this.onFocus=this .blur());} <br>#root .two{padding-left:20px;display:none;} <br> <본문> <레이블>校讯통 沈阳市 이소 2年级 삼년级 一班 张三 王五 班长 school习委员 实验班 抚顺市 이소 一中 <br>/**一般JS방법 <br>function addEvent(el,name,fn){//绑정사件 <br>if(el.addEventListener) return el.addEventListener(name,fn,false); <br>return el.attachEvent('on' name,fn); <br>} <br>function nextnode(node){//寻找下一个兄弟并剔除空的文本节点 <br>if(!node)return ; <br>if(node.nodeType == 1) <br>return node; <br>if(node.nextSibling) <br>return nextnode(node.nextSibling); <br>} <br>function prevnode(node){//寻找上一个兄弟并剔除空的文本节点 <br>if(!node)return ; <br>if(node.nodeType == 1) <br>return node; <br>if(node.previousSibling) <br>return prevnode(node.previousSibling); <br>} <br>addEvent(document.getElementById('root'),'click',function(e){//绑定点击事件,使用root根元素代理 <br>e = e||window.event ; <br>var target = e.target||e.srcElement; <br>var tp = nextnode(target.parentNode.nextSibling) <br>switch(target.nodeName){ <br>case 'A':/ /点击A标签展开和收缩树shape目录,并改变其样式 <br>if(tp&&tp.nodeName == 'UL'){ <br>if(tp.style.display != 'block' ){ <br> tp.style.display = 'block'; <br>prevnode(target.parentNode.previousSibling).className = 'ren' <br>}else{ <br>tp.style.display = <br>prevnode (target.parentNode.previousSibling).className = '추가' <br>} <br>}<br>break; <br>case 'SPAN'://아이콘을 클릭하면 확장 또는 축소만 가능합니다. <br>var ap = nextnode(nextnode(target.nextSibling).nextSibling) <br>if(ap.style. 표시 ! = '블록' ){ <br>ap.style.display = '블록'; <br>target.className = 'ren' <br>}else{ <br>ap.style.display = '없음'; <br>target.className = 'add' <br>} <br>break; <br>} <br>}) <br>window.onload = function(){//페이지를 로드할 때 다음 요소를 제공합니다. 하위 노드 동적으로 아이콘 추가 <br>var labels = document.getElementById('root').getElementsByTagName('label') <br>for(var i=0;i<labels.length;i ){ <BR>var 범위 = document.createElement('span'); <BR>span.style.cssText ='display:inline-block;height:18px;vertical-align:middle;width:16px;cursor:pointer;'; span.innerHTML = ' ' <BR>span.className = 'add' <BR>if(nextnode(labels[i].nextSibling)&&nextnode(labels[i].nextSibling).nodeName == 'UL') <BR>labels [i].parentNode.insertBefore(span,labels[i]); <BR>else <BR>labels[i].className = 'rem' <BR>} <BR>} <BR>**/ <BR> //객체 지향 메서드 <BR>var Tree = function(o){ <BR>this.root = document.getElementById(o) <BR>this.labels = this.root.getElementsByTagName('label') ; <BR>var that = this; <BR>this.int(); <BR>Tree.prototype.addEvent(this.root,'click',function(e){that.treeshow(e)}); 🎜>} <BR>Tree.prototype = { <BR>int:function(){//페이지를 초기화하고 로드 시 하위 노드가 있는 요소에 동적으로 아이콘을 추가합니다. <BR>for(var i=0;i<this. labels.length;i ){ <BR>varspan = document.createElement('span') <BR>span.style.cssText ='display:inline-block;height:18px;vertical-align:middle;width: 16px; 커서:포인터;'; <BR>span.innerHTML = ' ' <BR>span.className = '추가' <BR>if(this.nextnode(this.labels[i].nextSibling)&&this.nextnode( this.labels[i].nextSibling).nodeName == 'UL') <BR>this.labels[i].parentNode.insertBefore(span,this.labels[i]) <BR>else <BR>this. labels[ i].className = 'rem' <BR>} <BR>}, <BR>treeshow:function(e){ <BR>e = e||window.event <BR>var target = e.target; || e.srcElement; <BR>var tp = this.nextnode(target.parentNode.nextSibling); <BR>switch(target.nodeName){ <BR>case 'A'://A 라벨을 클릭하여 확장하세요. 트리 디렉토리를 축소하고 스타일을 변경하세요. <BR>if(tp&&tp.nodeName == 'UL'){ <BR>if(tp.style.display != 'block' ){ <BR>tp.style.display = 'block'; <BR>this.prevnode(target.parentNode.previousSibling).className = 'ren' <BR>}else{ <BR>tp.style.display = <BR>this.prevnode(target .parentNode.previousSibling) ).className = 'add' <BR>} <BR>} <BR>break; <BR>case 'SPAN'://아이콘을 클릭하면 확장 또는 축소만 가능<BR>var ap = this .nextnode(this.nextnode( target.nextSibling).nextSibling); <BR>if(ap.style.display != 'block' ){ <BR>ap.style.display = 'block' <BR>target. className = 'ren' <BR>}else{ <BR>ap.style.display = 'none'; <BR>target.className = 'add' <BR>} <BR>break <BR>} <BR> }, <BR>addEvent: function(el,name,fn){//바인딩 이벤트<BR>if(el.addEventListener) return el.addEventListener(name,fn,false) <BR>return el.attachEvent(' on' name,fn) ; <BR>}, <BR>nextnode:function(node){//다음 형제를 찾아 빈 텍스트 노드를 제거합니다. <BR>if(!node)return <BR>if(node. nodeType == 1) <BR>return node; <BR>if(node.nextSibling) <BR>return this.nextnode(node.nextSibling) <BR>}, <BR>prevnode:function(node){// 이전 형제를 찾아 빈 텍스트 노드 제거 <BR>if(!node)return ; <BR>if(node.nodeType == 1) <BR>return node <BR>if(node.previousSibling) <BR>return prevnode(node.previousSibling) <BR>} <BR>} <BR>tree = new Tree("root");//인스턴스화된 애플리케이션 <BR>