纯JavaScript树型目录结构

 

javascript

  1  <! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
  2  < html xmlns = " http://www.w3.org/1999/xhtml "  lang = " zh-cn " >
  3  < head >
  4  < meta http - equiv = " Content-Type "  content = " text/html; charset=gb2312 "   / >
  5  < meta content = " 古树,于恒良,www.gushu.net "   / >
  6 
  7  < title > 树型目录 < / title>
  8  < style type = " text/css " >
  9       <!--
 10      html,body {height: 100 % ;margin: 0 ;font:12px tahoma,宋体,sans - serif;}
 11      a {text - decoration:none;}
 12      a,a:visited {color:# 000 ;background:inherit;}
 13      

 

 14      p {margin: 0 ;padding: 0   0   0  18px;}
 15      p a,p a:visited {color:#00f;background:inherit;}
 16      
 17      
 18       /* 树型目录开始 */
 19      .TreeMenu img.s {cursor:pointer;vertical - align:middle;}
 20      .TreeMenu ul {padding: 0 ;}
 21      .TreeMenu li {list - style:none;padding: 0 ;}
 22      .Closed ul {display:none;}
 23      .Child img.s {background:none;cursor: default ;}
 24      
 25      #TreeMenu { float :left;width:200px;height: 98 % ;border:1px solid #99BEEF;background:#D2E4FC;color:inherit;margin:3px;padding:3px;}
 26      #TreeMenu ul {margin: 0   0   0  17px;}
 27      #TreeMenu img.s {width:20px;height:20px;}
 28      #TreeMenu .Opened img.s {background: url(bullet.gif); no - repeat  0  1px;}
 29      #TreeMenu .Closed img.s {background: url(bullet.gif); no - repeat  0  1px;}
 30      #TreeMenu .Child img.s {background: url(rt.gif); - repeat 13px 2px;}
 31       /* 树型目录结束 */
 32 
 33       -->
 34  < / style>
 35  < script type = " text/javascript " >
 36  <!--
 37       function  Ob(o){
 38        var  o = document.getElementById(o) ? document.getElementById(o):o;
 39        return  o;
 40      }
 41       function  Hd(o) {
 42       Ob(o).style.display = " none " ;
 43      }
 44       function  Sw(o) {
 45       Ob(o).style.display = "" ;
 46      }
 47       function  ExCls(o,a,b,n){
 48        var  o = Ob(o);
 49        for (i = 0 ;i < n;i ++ ) {o = o.parentNode;}
 50       o.className = o.className == a ? b:a;
 51      }
 52       function  TreeMenu(id,TagName0) {
 53         this .id = id;
 54         this .TagName0 = TagName0 == "" ? " li " :TagName0;
 55         this .AllNodes  =  Ob( this .id).getElementsByTagName(TagName0);
 56         this .InitCss  =   function  (ClassName0,ClassName1,ClassName2,ImgUrl) {
 57         this .ClassName0 = ClassName0;
 58         this .ClassName1 = ClassName1;
 59         this .ClassName2 = ClassName2;
 60         this .ImgUrl = ImgUrl  ||   " TreeMenu_img/s.gif " ;
 61         this .ImgBlankA  = " <img src=\ "" +this.ImgUrl+ " \ "  s\ "  ExCls( this , ' "+ClassName0+" ' , ' "+ClassName1+" ' , 1 );\ "  alt=\ " 展开 / 折叠\"  / > " ;
 62        this.ImgBlankB = " < img src = \ "" + this .ImgUrl + " \ "  s\ "  /> " ;
 63         for  (i = 0 ;i < this .AllNodes.length;i ++  ) {
 64          this .AllNodes[i].className == "" ? this .AllNodes[i].className = ClassName1: "" ;
 65          this .AllNodes[i].innerHTML = ( this .AllNodes[i].className == ClassName2 ? this .ImgBlankB: this .ImgBlankA) + this .AllNodes[i].innerHTML;
 66         }
 67       }
 68        this .SetNodes  =   function  (n) {
 69         var  sClsName = n == 0 ? this .ClassName0: this .ClassName1;
 70         for  (i = 0 ;i < this .AllNodes.length;i ++  ) {
 71          this .AllNodes[i].className == this .ClassName2 ? "" : this .AllNodes[i].className = sClsName;
 72        }
 73       }
 74      }
 75  -->
 76  < / script>
 77 
 78  < / head>
 79  < body >
 80 
 81  < div  >
 82 
 83  < p >< a href = " # "  AllClose ' );">全部展开</a><a href="#" AllOpen ' ); "  style= " display:none; " >全部折叠</a></p>
 84 
 85  <ul>
 86  <li ><a href= " # "  target= " _blank " >古树网站后台管理系统</a>
 87  <!--目录节点开始-->
 88        <ul>
 89      <li><a href= " # 1 " >111</a>
 90          <ul>
 91              <li><a href= " # 2 " >222</a>
 92                  <ul>
 93                   <li ><a href= " # " >333</a></li>
 94                   <li ><a href= " # " >333</a></li>
 95                   <li ><a href= " # " >333</a></li>
 96                   <li ><a href= " # " >333</a></li>
 97                   <li ><a href= " # " >333</a></li>
 98                   <li ><a href= " # " >333</a></li>
 99                   <li ><a href= " # " >333</a></li>
100                  </ul>
101              </li>
102              <li><a href= " # " >Web编程</a>
103                  <ul>
104                   <li ><a href= " # " >Java</a></li><!--Child Node-->
105                   <li ><a href= " # " >.Net</a></li>
106                   <li ><a href= " # " >ASP/VBScript</a></li>
107                   <li ><a href= " # " >PHP</a></li>
108                   <li ><a href= " # " >Perl/Python</a></li>
109                   <li ><a href= " # " >Web综合/开源</a></li>
110                  </ul>
111              </li>
112          </ul>
113      </li>
114      </ul>
115  <!--目录节点开始-->
116  </li>
117  </ul><ul>
118  <li ><a href= " http: // www.gushu.cn/" target="_blank">古树网站后台管理系统</a>
119  <!-- 目录节点开始 -->
120         < ul >
121       < li >< a href = " #1 " > 111 < / a>
122           < ul >
123               < li >< a href = " #2 " > 222 < / a>
124                   < ul >
125                    < li  >< a href = " # " > 333 < / a>< / li >
126                    < li  >< a href = " # " > 333 < / a>< / li >
127                    < li  >< a href = " # " > 333 < / a>< / li >
128                    < li  >< a href = " # " > 333 < / a>< / li >
129                    < li  >< a href = " # " > 333 < / a>< / li >
130                    < li  >< a href = " # " > 333 < / a>< / li >
131                    < li  >< a href = " # " > 333 < / a>< / li >
132                   < / ul>
133               < / li>
134               < li >< a href = " # " > Web编程 < / a>
135                   < ul >
136                    < li  >< a href = " # " > Java < / a>< / li ><!-- Child Node -->
137                    < li  >< a href = " # " > .Net < / a>< / li >
138                    < li  >< a href = " # " > ASP / VBScript< / a >< / li>
139                    < li  >< a href = " # " > PHP < / a>< / li >
140                    < li  >< a href = " # " > Perl / Python< / a >< / li>
141                    < li  >< a href = " # " > Web综合 / 开源< / a >< / li>
142                   < / ul>
143               < / li>
144           < / ul>
145       < / li>    <li><a href="#1">111< / a >
146           < ul >
147               < li >< a href = " #2 " > 222 < / a>
148                   < ul >
149                    < li  >< a href = " # " > 333 < / a>< / li >
150                    < li  >< a href = " # " > 333 < / a>< / li >
151                    < li  >< a href = " # " > 333 < / a>< / li >
152                    < li  >< a href = " # " > 333 < / a>< / li >
153                    < li  >< a href = " # " > 333 < / a>< / li >
154                    < li  >< a href = " # " > 333 < / a>< / li >
155                    < li  >< a href = " # " > 333 < / a>< / li >
156                   < / ul>
157               < / li>
158               < li >< a href = " # " > Web编程 < / a>
159                   < ul >
160                    < li  >< a href = " # " > Java < / a>< / li ><!-- Child Node -->
161                    < li  >< a href = " # " > .Net < / a>< / li >
162                    < li  >< a href = " # " > ASP / VBScript< / a >< / li>
163                    < li  >< a href = " # " > PHP < / a>< / li >
164                    < li  >< a href = " # " > Perl / Python< / a >< / li>
165                    < li  >< a href = " # " > Web综合 / 开源< / a >< / li>
166                   < / ul>
167               < / li>
168           < / ul>
169       < / li>
170       < / ul>
171  <!-- 目录节点开始 -->
172  < / li>
173  < / ul>
174  < / div>
175  < script type = " text/javascript " >
176  <!--
177       var  MyTreeMenu = new  TreeMenu( " TreeMenu " , " li " );
178      MyTreeMenu.InitCss( " Opened " , " Closed " , " Child " , " tr.gif " );
179  -->
180  < / script>
181  < / body>
182  < / html>
183 

 

 

转载于:https://www.cnblogs.com/jialia/archive/2010/01/27/1657678.html