怎么写展开，收缩的blog代码？

例如就像下面地址：
http://www.cnblogs.com/skyendless/archive/2006/02/20/334386.html
点加号时展开，点减号时收缩
用html代码怎么可以实现？

解决方案 »

  1.   


    <html> 
    <head> 
    <title> Tree Menu </title> 
    </head> 
    <script language="javascript" type="text/javascript"> 
    <!-- 
    function tog(item) 
    { 
       obj=document.getElementById(item);    
       visible=(obj.style.display!="none"); 
       key=document.getElementById("x" + item);    
       if (visible)  
       {      
          obj.style.display="none";      
          key.innerHTML="+"; 
       } 
       else  
       {    
          obj.style.display="block";       
          key.innerHTML="-";    
       } 
    }   function expall(item,yes) 
    { 
       obj=document.getElementById(item); 
       arr=obj.getElementsByTagName("UL"); 
       for (i=0;i <arr.length;i++)  
       { 
         key=document.getElementById("x" + arr[i].id);      
         if(yes) 
         { 
           arr[i].style.display="block"; 
           key.innerHTML="-";      
         } 
         else 
         { 
           arr[i].style.display="none"; 
           key.innerHTML="+"; 
         } 
       } 
    }//--> 
    </script> 
    <div id='tree'> 
    <a id='xall' href="javascript:tog('all');"> + </a> 
    <ul id='all' style="display:none;"> 
    <li> child1 </li> 
    <li > 
    <a id='xfather' href="javascript:tog('father');"> + </a> 
    father 
    <ul id='father' style="display:none;"> 
    <li> child2 </li> 
    <li> child3 </li>    
    </ul> 
    </li> 
    </ul> 
    </div> 
    <p> 
    <a href="javascript:expall('tree',1);"> Expand All </a>   
    --  <a href="javascript:expall('tree',0);"> Collapse All </a> 
    </p> 
    </body> 
    </html>
      

  2.   

    隐藏div,加上动作就OK了,ajax的控件有实现类似功能的
      

  3.   

    控制DIV的display属性就可以了,在外面放两个"+"和"-"的图片,在点击中写事件
      

  4.   

    用javasript  控制div 顯示隱藏就可以了