js三级分类菜单导航

男娘i 2024-02-17 20:14 58阅读 0赞

原理很简单：点击标题的时候把子目录的id传给js函数，然后js函数判断是打开还是关上子目录。

Code:

1.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2.  <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
3.  
4.  <head>
5.  <title>三级导航菜单,三级竖向展开/收缩导航菜单-网页特效观止-网页特效代码|JsCode.CN|</title>
6.  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
7.  <style>
8.  \*\{ margin:0; padding:0;font-size:12px;\}
9.  ul\{ list-style:none;\}
10. .ps\{margin-left:10px;display:none;\}
11. .f\{cursor:pointer;line-height:20px; padding-left:20px; height:20px;\}
12. .b\{cursor:pointer;line-height:20px; padding-left:20px; height:20px;\}
13. .menu\{padding:8px 0;\}
14. </style>
15. </head>
16. <body bgcolor="\#F6F6F6">
17. <div class="menu">
18. 
19. 
20. <div class="f" id="sa1" onclick="w('a1')">香车美女</div>
21. <div class="ps" id="a1" style="display:none">
22. <div id="ssa1b1" class="f" onclick="w('sa1b1')">2008北京车展车模(6164)</div>
23. <ul class="ps" id="sa1b1">
24. <li class="b">其他车模(1384)</li>
25. <li class="b">捷豹展台车模(199)</li>
26. <li class="b">力帆汽车展台车模(49)</li>
27. </ul>
28. 
29. 
30. <div id="ssa1b2" class="f" onclick="w('sa1b2')">2008北京车展花絮(782)</div>
31. <ul class="ps" id="sa1b2">
32. <li class="b">2008款LRX概念车发布现场(11)</li>
33. <li class="b">PIVO 2 发布现场(7)</li>
34. <li class="b">大众展台美丽风光(24)</li>
35. </ul>
36. </div>
37. 
38. 
39. 
40. 
41. <div class="f" id="sa2" onclick="w('a2')">香车美女2</div>
42. <div class="ps" id="a2" style="display:none">
43. <div id="ssa2b2" class="f" onclick="w('sa2b2')" >2008北京车展车模(6164)</div>
44. <ul class="ps" id="sa2b2"style="background-repeat: no-repeat;">
45. <li class="b">其他车模(1384)</li>
46. <li class="b">捷豹展台车模(199)</li>
47. <li class="b">力帆汽车展台车模(49)</li>
48. </ul>
49. <div id="sfmn2b3" class="f" onclick="w('fmn2b2')">2008北京车展花絮(782)</div>
50. <ul class="ps" id="fmn2b3">
51. <li class="b">2008款LRX概念车发布现场(11)</li>
52. <li class="b">PIVO 2 发布现场(7)</li>
53. <li class="b">大众展台美丽风光(24)</li>
54. </ul>
55. </div>
56. </div>
57. 
58. <script language="javascript" type="text/javascript">
59. function w(vd)
60. \{
61. var ob=document.getElementById(vd);
62. if(ob.style.display=="block" || ob.style.display=="")
63. \{
64. ob.style.display="none";
65. \}
66. else
67. \{
68. ob.style.display="block";
69. \}
70. \}
71. 
72. </script>
73. </body>
74. 
75. </html>

懒人图库网上有不少源码 http://www.lanrentuku.com/