javascript手风琴下拉菜单实现代码

手风琴效果的下拉菜单大家都有见到过吧，实现的方法也有很多，这篇文章就为大家分享了javascript手风琴下拉菜单实现代码，纯手写的，感兴趣的朋友不要错过。

手风琴下拉菜单实现的效果更灵活，不同与传统的下拉菜单，本文就为大家分享一段javascript手风琴下拉菜单实现代码，先看一看效果图：

具体的javascript手风琴下拉菜单代码：

1. <!DOCTYPE html> 
2. <html> 
3. <head> 
4. <meta charset="UTF-8"> 
5. <title>手风琴下拉菜单效果</title> 
6. <script src="js/jquery-1.11.1.js"></script> 
7. <style> 
8. *{ 
9. margin: 0; 
10. padding: 0; 
11. } 
12. ul{ 
13. list-style: none; 
14. } 
15. .nav ul{ 
16. display: none; 
17. } 
18. .nav ul li{ 
19. width: 100px; 
20. text-align: center; 
21. cursor: pointer; 
22. } 
23. .nav div{ 
24. background: #4ecc70; 
25. width: 100px; 
26. border-radius: 10px; 
27. line-height: 34px; 
28. text-align: center; 
29. color: white; 
30. cursor: pointer; 
31. } 
32. .demo{ 
33. /* display: none;*/ 
34. } 
35. .red{ 
36. background:red; 
37. border-radius: 10px; 
38. } 
39.  
40. </style> 
41. <script> 
42. $(function(){ 
43. //case 1 
44. // $('.nav div').on('click',function(){ 
45. // if(false==$(this).next().is(':visible')){ 
46. // $('.nav ul').slideUp(300); 
47. // } 
48. // $(this).next().slideToggle(300); 
49. // }) 
50. //case 2 
51. var changeType=$('.nav').find('div'); 
52. $.each(changeType,function(){ 
53. $(this).on('click',function(){ 
54. if(false==$(this).next().is(':visible')){ 
55. $('.nav ul').slideUp(300); 
56. } 
57. $(this).next().slideToggle(300); 
58. }) 
59. $('.nav ul:eq(0)').show(); 
60.  
61. }) 
62. var hoverType=$('.nav .u').find('li') 
63. $.each(hoverType,function(){ 
64. $(this).hover(function(){ 
65. $(this).addClass('red').siblings().removeClass('red'); 
66. }) 
67. }) 
68.  
69. }) 
70. </script> 
71. </head> 
72. <body> 
73. <ul class="nav"> 
74. <li> 
75. <div>水果</div> 
76. <ul class="u"> 
77. <li>香蕉</li> 
78. <li>橘子</li> 
79. <li>梨子</li> 
80. <li>西瓜</li> 
81. </ul> 
82. </li> 
83. <li> 
84. <div>蔬菜</div> 
85. <ul class="u"> 
86. <li>芹菜</li> 
87. <li>黄瓜</li> 
88. <li>洋葱</li> 
89. <li>西瓜</li> 
90. </ul> 
91. </li> 
92. <li> 
93. <div>肉类</div> 
94. <ul class="u"> 
95. <li>鸡肉</li> 
96. <li>兔肉</li> 
97. <li>鸭肉</li> 
98. <li>龙肉</li> 
99. </ul> 
100. </li> 
101.  
102. </ul> 
103. </body> 
104. </html> 

以上就是为大家分享的javascript手风琴下拉菜单代码，希望对大家的学习有所帮助，动手为自己的网站实现手风琴下拉菜单吧!