用Javascript實現選單摺疊效果

科技小先鋒發表於2017-11-16
JavaScript

在網上看了好多用Javascript實現選單摺疊的例子都特別的麻煩，於是自己寫了一個雖然效果不如網上的強但是也可以實現了相應的功能：



    

  1. functiondisplay(num)   
    2. 

  2. {  
    3. 

  3. 
if(menu_left[num].style.display==“none”)   

    4. 

  4. {  
    5. 

  5. 
for(a=0;a<menu_left.length;a++){   

    6. 

  6. 
if(a==num){   

    7. 

  7. 
menu_left[a].style.display=“inline”;   

    8. 

  8. }  
    9. 

  9. 
else{   

    10. 

  10. 
menu_left[a].style.display=“none”;   

    11. 

  11. }  
    12. 

  12. }  
    13. 

  13. }  
    14. 

  14. 
else{   

    15. 

  15. 
menu_left[num].style.display=“none”;   

    16. 

  16. }  
    17. 

  17. } 
    18. 



 




    

  1. <!DOCTYPEHTMLPUBLIC”-//W3C//DTDHTML4.01//EN””http://www.w3.org/TR/html4/strict.dtd”>   
    2. 

  2. 
<html>   

    3. 

  3. 
<head>   

    4. 

  4. 
<metahttp-equivmetahttp-equiv=”Content-Type”content=”text/html;charset=utf-8″/>   

    5. 

  5. 
<linkrellinkrel=”stylesheet”type=”text/css”href=“../../css.css”>   

    6. 

  6. 
<scriptlanguagescriptlanguage=”javascript”src=”hide.js”></script>   

    7. 

  7.  
    8. 

  8. 
</head>   

    9. 

  9. 
<body>   

    10. 

  10. 
<divclassdivclass=“menu_left”>   

    11. 

  11. 
<ul>   

    12. 

  12.  
    13. 

  13. 
<li>   

    14. 

  14. 
<ahrefahref=“javascript:display(0)”>號碼資訊維護管理</a>   

    15. 

  15. 
<dividdivid=”menu_left”style=”display:none”>   

    16. 

  16. 
<ul>   

    17. 

  17. 
<li>   

    18. 

  18. 
<ahrefahref=”information_select.html”target=”right”>查詢號碼資訊</a>   

    19. 

  19. 
</li>   

    20. 

  20. 
<li>   

    21. 

  21. 
<ahrefahref=”information_batchupdata.html”target=”right”>狀態批量修改頁面</a>   

    22. 

  22. 
</li>   

    23. 

  23. 
<li>   

    24. 

  24. 
<ahrefahref=”loginformation_select.html”target=”right”>日誌查詢頁面</a>   

    25. 

  25. 
</li>   

    26. 

  26. 
</ul>   

    27. 

  27. 
</div>   

    28. 

  28. 
</li>   

    29. 

  29. 
<li>   

    30. 

  30. 
<ahrefahref=“javascript:display(1)”>號碼回收</a>   

    31. 

  31. 
<dividdivid=”menu_left”style=”display:none”>   

    32. 

  32. 
<ul>   

    33. 

  33. 
<li>   

    34. 

  34. 
<ahrefahref=”recovery/numbers_list_recovery.html”target=”right”>待回收號碼清單</a>   

    35. 

  35. 
</li>   

    36. 

  36. 
<li>   

    37. 

  37. 
<ahrefahref=”recovery/numbers_statistics_recovery.html”target=”right”>待回收號碼詳情統計</a>   

    38. 

  38. 
</li>   

    39. 

  39. 
</ul>   

    40. 

  40. 
</div>   

    41. 

  41. 
</li>   

    42. 

  42. 
<li>   

    43. 

  43. 
<ahrefahref=”restart/options.html”target=”right”>回收號碼啟用</a>   

    44. 

  44.  
    45. 

  45. 
</li>   

    46. 

  46. 
</ul>   

    47. 

  47. 
</div>   

    48. 

  48. 
<divclassdivclass=“right”>   

    49. 

  49. 
<iframeclassiframeclass=”rightIframe”src=”information_select.html”name=”right”frameborder=”0″scrolling=”no”width=”100%”onload=”this.height=0;varfdh=(this.Document?this.Document.body.scrollHeight:this.contentDocument.body.offsetHeight);this.height=(fdh>7?fdh:7)”allowtransparency=”false”>   

    50. 

  50. 
</iframe>   

    51. 

  51. 
</div>   

    52. 

  52. 
</body>   

    53. 

  53. 
</html>  

    54. 



這樣就實現了選單的摺疊效果了，是不是覺得很簡單啊。
還有一點要注意在引入指令碼的時候<script></script>要這樣寫全，要不然會出不來頁面。




本文轉自sucre03 51CTO部落格，原文連結：http://blog.51cto.com/sucre/381826，如需轉載請自行聯絡原作者










相關文章