DIV+Js实现简单树形菜单

 

< META  content ="Microsoft Visual Studio .NET 7.1"  name =GENERATOR >
< META  content =VisualStudio.HTML  name =ProgId >
< META  content ="Microsoft Visual Studio .NET 7.1"  name =Originator
<SCRIPT language =jscript >
   function ChangeStatus(o)
   {
    if (o.parentNode)
    {
     if (o.parentNode.className == "Opened")
     {
      o.parentNode.className = "Closed";
     }
     else
     {
      o.parentNode.className = "Opened";
     }
    }
   }
    </ SCRIPT >

< DIV  class =TreeMenu  id =CategoryTree >
< UL >
< LI  class =Opened >< IMG  class =s  onclick =javascript:ChangeStatus(this);  src ="css/s.gif" >< A  href ="#" > 123213 </ A >  
< UL >
< LI  class =Opened >< IMG  class =s  onclick =javascript:ChangeStatus(this);  src ="css/s.gif" >< A  href ="#" > 1232131 </ A >  
< UL >
< LI  class =Opened >< IMG  class =s  onclick =javascript:ChangeStatus(this);  src ="css/s.gif" >< A  href ="#" > JavaScript </ A >  
< UL >
< LI  class =Child >< IMG  class =s  src ="css/s.gif" >< A  href ="#" > 1111111 </ A >  
< LI  class =Child >< IMG  class =s  src ="css/s.gif" >< A  href ="#" > 22233332 </ A >  
< LI  class =Child >< IMG  class =s  src ="css/s.gif" >< A  href ="#" > 3333444 </ A >  
< LI  class =Child >< IMG  class =s  src ="css/s.gif" >< A  href ="#" > 44444444 </ A >  
< LI  class =Child >< IMG  class =s  src ="css/s.gif" >< A  href ="#" > 55555555 </ A >  
< LI  class =Child >< IMG  class =s  src ="css/s.gif" >< A  href ="#" > 66666666 </ A >  
< LI  class =Child >< IMG  class =s  src ="css/s.gif" >< A  href ="#" > 777777777 </ A >   </ LI ></ UL ></ LI ></ UL ></ LI ></ UL ></ LI ></ UL ></ DIV >

<!-- css样式 -->
< style > ...
a {...}{ text-decoration:none; } a,a:visited {...}{ color:#000; background:inherit; } body {...}{ margin:0; padding:20px; font:12px tahoma,宋体,sans-serif; } dt {...}{ font-size:22px; font-weight:bold; margin:0 0 0 15px; } dd {...}{ margin:0 0 0 15px; } h4 {...}{ margin:0; padding:0; font-size:18px; text-align:center; } p {...}{ margin:0; padding:0 0 0 18px; } p a,p a:visited {...}{ color:#00f; background:inherit; } .TreeMenu img.s {...}{ cursor:hand; vertical-align:middle; } .TreeMenu ul {...}{ padding:0; } .TreeMenu li {...}{ list-style:none; padding:0; } .Closed ul {...}{ display:none; } .Child img.s {...}{ background:none; cursor:default; } #CategoryTree ul {...}{ margin:0 0 0 17px; } #CategoryTree img.s {...}{ width:34px; height:18px; } #CategoryTree .Opened img.s {...}{ background:url(skin3/opened.gif) no-repeat 0 1px; } #CategoryTree .Closed img.s {...}{ background:url(skin3/closed.gif) no-repeat 0 1px; } #CategoryTree .Child img.s {...}{ background:url(skin3/child.gif) no-repeat 13px 2px; } #CategoryTree {...}{ float:left; width:249px; border:1px solid #99BEEF; background:#D2E4FC; color:inherit; margin:3px; padding:3px; }
</ style >