Javascript應用–實現菜單列表展開閉合效果

來源:互聯網
上載者:User
Code:
  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">    
  3. <head>    
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
      
  5. <title>無標題文檔</title>    
  6. <style type="text/css">    
  7. table{    
  8.         border:#0066FF 1px solid;    
  9.         }    
  10. table td{    
  11.         border:#0000FF 1px solid;    
  12.         background-color:#00CCFF;    
  13.         }    
  14. table td div{    
  15.         background-color:#66FFCC;    
  16.         display:none;    
  17.         }    
  18. table td a:link,table td a:visited{    
  19.         text-decoration:none;    
  20.         color:#993300;    
  21.         }    
  22.             
  23. .open{    
  24.         display:block;    
  25.         }    
  26. .close{    
  27.         display:none;    
  28.         }    
  29. </style>    
  30. <script type="text/javascript">    
  31. function list2()    
  32. {    
  33.         var aNode = event.srcElement;    
  34.         var tdNode = aNode.parentNode;    
  35.         var divNode = tdNode.getElementsByTagName("div")[0];    
  36.         //alert(divNode.nodeName);    
  37.             
  38.         var tabNode = document.getElementsByTagName("table")[0];    
  39.             
  40.         var divNodes = tabNode.getElementsByTagName("div");    
  41.         for(var x=0 ; x<divNodes.length; x++)    
  42.         {    
  43.                 if(divNodes[x]==divNode)    
  44.                 {    
  45.                         if(divNode.className == "open")    
  46.                         {    
  47.                                 divNode.className = "close";    
  48.                         }    
  49.                         else    
  50.                         {    
  51.                                 divNode.className = "open";    
  52.                         }    
  53.                 }    
  54.                 else    
  55.                         divNodes[x].className = "close";    
  56.         }           
  57. }    
  58. </script>    
  59. </head>    
  60.   
  61. <body>    
  62.   
  63. <table>    
  64.         <tr>    
  65.             <td>    
  66.                 <a href="javascript:void(0)" onclick="list2()">好友菜單列表</a> 
      
  67.             <div>    
  68.                     撒旦防撒旦法    
  69.   
  70.                 撒旦防撒旦法    
  71.   
  72.                 撒旦防撒旦法    
  73.   
  74.                 撒旦防撒旦法    
  75.   
  76.                 撒旦防撒旦法    
  77.   
  78.             </div>    
  79.         </td>    
  80.     </tr>    
  81.     <tr>    
  82.             <td>    
  83.                 <a href="javascript:void(0)" onclick="list2()">好友菜單列表</a> 
      
  84.             <div>    
  85.                     撒旦防撒旦法    
  86.   
  87.                 撒旦防撒旦法    
  88.   
  89.                 撒旦防撒旦法    
  90.   
  91.                 撒旦防撒旦法    
  92.   
  93.                 撒旦防撒旦法    
  94.   
  95.             </div>    
  96.         </td>    
  97.     </tr>    
  98.         
  99.     <tr>    
  100.             <td>    
  101.                 <a href="javascript:void(0)" onclick="list2()">好友菜單列表</a> 
      
  102.             <div>    
  103.                     撒旦防撒旦法    
  104.   
  105.                 撒旦防撒旦法    
  106.   
  107.                 撒旦防撒旦法    
  108.   
  109.                 撒旦防撒旦法    
  110.   
  111.                 撒旦防撒旦法    
  112.   
  113.             </div>    
  114.         </td>    
  115.     </tr>    
  116.         
  117.     <tr>    
  118.             <td>    
  119.                 <a href="javascript:void(0)" onclick="list2()">好友菜單列表</a> 
      
  120.             <div>    
  121.                     撒旦防撒旦法    
  122.   
  123.                 撒旦防撒旦法    
  124.   
  125.                 撒旦防撒旦法    
  126.   
  127.                 撒旦防撒旦法    
  128.   
  129.                 撒旦防撒旦法    
  130.   
  131.             </div>    
  132.         </td>    
  133.     </tr>    
  134.     <tr>    
  135.             <td>    
  136.                 <a href="javascript:void(0)" onclick="list2()">好友菜單列表</a> 
      
  137.             <div>    
  138.                     撒旦防撒旦法    
  139.   
  140.                 撒旦防撒旦法    
  141.   
  142.                 撒旦防撒旦法    
  143.   
  144.                 撒旦防撒旦法    
  145.   
  146.                 撒旦防撒旦法    
  147.   
  148.             </div>    
  149.         </td>    
  150.     </tr>    
  151.     <tr>    
  152.             <td>    
  153.                 <a href="javascript:void(0)" onclick="list2()">好友菜單列表</a> 
      
  154.             <div>    
  155.                     撒旦防撒旦法    
  156.   
  157.                 撒旦防撒旦法    
  158.   
  159.                 撒旦防撒旦法    
  160.   
  161.                 撒旦防撒旦法    
  162.   
  163.                 撒旦防撒旦法    
  164.   
  165.             </div>    
  166.         </td>    
  167.     </tr>    
  168. </table>    
  169.   
  170. </body>    
  171. </html>    
  172.   

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.