折叠式菜单的简单实现

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > 无标题文档 </ title >
< script     type ="text/javascript" >
     function  subClick(source)
    {
         var  menu = document.getElementById( " menu " );
         var  h3s = menu.getElementsByTagName( " h3 " );
         var  divs = menu.getElementsByTagName( " div " );    
         for ( var  i = 0 ;i < h3s.length;i ++ )
        {
             if (source == h3s[i])
            {
                divs[i].style.display = " block " ;
                h3s[i].style.background = " Blue " ;
            }
             else
            {
                divs[i].style.display = "" ;
                h3s[i].style.background = " silver " ;    
            }
        }    
    }
</ script >
< style  type ="text/css" >
    #menu { width : 300pt ; }
    .submenu {  display : none ; }
    #menu h3 { width : auto ; height : 20pt ;  background : silver ; }
</ style >
</ head >

< body >
     < div  id ="menu" >
         < h3  onclick ="return subClick(this);" > menu1 </ h3 >
         < div  class ="submenu" >
            option1 < br  />
            option1 < br  />
            option1 < br  />
         </ div >
         < h3  onclick ="return subClick(this);" > menu2 </ h3 >
         < div  class ="submenu" >
            option2 < br  />
            option2 < br  />
            option2 < br  />
         </ div >
         < h3  onclick ="return subClick(this);" > menu3 </ h3 >
         < div  class ="submenu" >
            option3 < br  />
            option3 < br  />
            option3 < br  />
         </ div >
     </ div >
</ body >
</ html >

转载于:https://www.cnblogs.com/anllin/articles/2011239.html