用 Javascript 制作可折叠式导航菜单

网站实例地址：http://www.codebit.cn/pub/html/javascript/tip/switch_menu/

Javascript:

   
   

     
     

      
       
     
     

     
     

      
      <script type=
      
      "text/javascript"> 
     
     

     
     

      
      // 说明：用 Javascript 制作可折叠式导航菜单 
     
     

     
     

      
      // 整理：http://www.CodeBit.cn 
     
     

     
     

      
       
     
     

     
     

      
      // curr_id : 当前id ; total_num 总共有几个菜单 
     
     

     
     

      
      function switchMenu
      
      (curr_id, total_num
      
      ) 
     
     

     
     

      
      { 
     
     

     
     
    
      
      for
      
      (
      
      var i=
      
      0; i<total_num; i++
      
      ) 
     
     

     
     
    
      
      { 
     
     

     
     
        
      
      //二级菜单 
     
     

     
     
        
      
      var el = document.
      
      getElementById
      
      (
      
      'menu_sub_'+i
      
      ); 
     
     

     
     

      
       
     
     

     
     
        
      
      if
      
      (!el
      
      ) 
      
      return; 
     
     

     
     

      
       
     
     

     
     
        
      
      //一级菜单前面的图片 
     
     

     
     
        
      
      var img = document.
      
      getElementById
      
      (
      
      'menu_master_'+i
      
      ); 
     
     

     
     

      
       
     
     

     
     
        
      
      if
      
      (i == curr_id
      
      ) 
     
     

     
     
        
      
      { 
     
     

     
     

      
                  el.
      
      style.
      
      display = 
      
      "block"; 
     
     

     
     

      
                  img.
      
      src = 
      
      "img/open.gif"; 
     
     

     
     
        
      
      } 
     
     

     
     
        
      
      else 
     
     

     
     
        
      
      { 
     
     

     
     

      
                  el.
      
      style.
      
      display = 
      
      "none"; 
     
     

     
     

      
                  img.
      
      src = 
      
      "img/close.gif"; 
     
     

     
     
        
      
      } 
     
     

     
     
    
      
      } 
     
     

     
     

      
      } 
     
     

     
     

      
      </script> 
     
     

     
     

      
       
     
     

HTML:

   
   

     
     

      
       
     
     

     
     

      
      <style type="text/css"> 
     
     

     
     

      
      <!--  
     
     

     
     

      
      #warp { 
     
     

     
     

      
          width:200px; 
     
     

     
     

      
          margin:100px auto; 
     
     

     
     

      
      } 
     
     

     
     

      
      .menu_master { 
     
     

     
     

      
          border:1px solid #ccc; 
     
     

     
     

      
          padding:5px 10px; 
     
     

     
     

      
          margin-bottom:2px; 
     
     

     
     

      
          cursor:pointer; 
     
     

     
     

      
          font-weight:bold; 
     
     

     
     

      
          color:#666; 
     
     

     
     

      
      } 
     
     

     
     

      
      .menu_master img { vertical-align:middle; } 
     
     

     
     

      
      .sub_menu { display:none; } 
     
     

     
     

      
      .sub_menu ul, .sub_menu ul li { 
     
     

     
     

      
          margin:0; 
     
     

     
     

      
          padding:0; 
     
     

     
     

      
          list-style:none; 
     
     

     
     

      
      } 
     
     

     
     

      
      .sub_menu ul li a { 
     
     

     
     

      
          margin:0 0 3px 10px; 
     
     

     
     

      
          padding:3px 0 2px 25px; 
     
     

     
     

      
          background:url('img/fw.gif') no-repeat 5px center; 
     
     

     
     

      
          display:block; 
     
     

     
     

      
          height:18px; 
     
     

     
     

      
          border-bottom:1px solid #eee; 
     
     

     
     

      
          color:#666; 
     
     

     
     

      
          text-decoration:none; 
     
     

     
     

      
      } 
     
     

     
     

      
      -->
     
     

     
     

      
      </style> 
     
     

     
     

      
       
     
     

     
     

      
       
     
     

     
     

      
      <div id="warp"> 
     
     

     
     

      
       
     
     

     
     
    
      
      <div class="menu_master" onclick="javascript:switchMenu(0, 4);"> 
     
     

     
     
        
      
      <img src="close.gif" alt="close" id="menu_master_0" /> PHP/MySQL 
     
     

     
     
    
      
      </div> 
     
     

     
     
    
      
      <div id="menu_sub_0" class="sub_menu"> 
     
     

     
     
        
      
      <ul> 
     
     

     
     
            
      
      <li>
      
      <a href="http://www.codebit.cn/pub/html/php_mysql/tutorial/" title="PHP/MySQL教程">PHP/MySQL教程
      
      </a>
      
      </li> 
     
     

     
     
            
      
      <li>
      
      <a href="http://www.codebit.cn/pub/html/php_mysql/tip/" title="PHP/MySQL小技巧">PHP/MySQL小技巧
      
      </a>
      
      </li> 
     
     

     
     
            
      
      <li>
      
      <a href="http://www.codebit.cn/pub/html/php_mysql/problem/" title="PHP/MySQL常见问题">PHP/MySQL常见问题
      
      </a>
      
      </li> 
     
     

     
     
        
      
      </ul> 
     
     

     
     
    
      
      </div> 
     
     

     
     

      
       
     
     

     
     
    
      
      <div class="menu_master" onclick="javascript:switchMenu(1, 4);"> 
     
     

     
     
        
      
      <img src="close.gif" alt="close" id="menu_master_1" /> (X)HTML/CSS 
     
     

     
     
    
      
      </div> 
     
     

     
     
    
      
      <div id="menu_sub_1" class="sub_menu"> 
     
     

     
     
        
      
      <ul> 
     
     

     
     
            
      
      <li>
      
      <a href="http://www.codebit.cn/pub/html/xhtml_css/tutorial/" title="(X)HTML/CSS教程">(X)HTML/CSS教程
      
      </a>
      
      </li> 
     
     

     
     
            
      
      <li>
      
      <a href="http://www.codebit.cn/pub/html/xhtml_css/tip/" title="(X)HTML/CSS小技巧">(X)HTML/CSS小技巧
      
      </a>
      
      </li> 
     
     

     
     
        
      
      </ul> 
     
     

     
     
    
      
      </div> 
     
     

     
     

      
       
     
     

     
     
    
      
      <div class="menu_master" onclick="javascript:switchMenu(2, 4);"> 
     
     

     
     
        
      
      <img src="close.gif" alt="close" id="menu_master_2" /> Ajax 
     
     

     
     
    
      
      </div> 
     
     

     
     
    
      
      <div id="menu_sub_2" class="sub_menu"> 
     
     

     
     
        
      
      <ul> 
     
     

     
     
            
      
      <li>
      
      <a href="http://www.codebit.cn/pub/html/ajax/tutorial/" title="Ajax教程">Ajax教程
      
      </a>
      
      </li> 
     
     

     
     
            
      
      <li>
      
      <a href="http://www.codebit.cn/pub/html/ajax/tip/" title="Ajax小技巧">Ajax小技巧
      
      </a>
      
      </li> 
     
     

     
     
        
      
      </ul> 
     
     

     
     
    
      
      </div> 
     
     

     
     

      
       
     
     

     
     
    
      
      <div class="menu_master" onclick="javascript:switchMenu(3, 4);"> 
     
     

     
     
        
      
      <img src="close.gif" alt="close" id="menu_master_3" /> Javascript 
     
     

     
     
    
      
      </div> 
     
     

     
     
    
      
      <div id="menu_sub_3" class="sub_menu"> 
     
     

     
     
        
      
      <ul> 
     
     

     
     
            
      
      <li>
      
      <a href="http://www.codebit.cn/pub/html/javascript/tutorial/" title="Javascript教程">Javascript教程
      
      </a>
      
      </li> 
     
     

     
     
            
      
      <li>
      
      <a href="http://www.codebit.cn/pub/html/javascript/tip/" title="Javascript小技巧">Javascript小技巧
      
      </a>
      
      </li> 
     
     

     
     
        
      
      </ul> 
     
     

     
     
    
      
      </div> 
     
     

     
     

      
       
     
     

     
     

      
      </div>