jQuery实现的动态伸缩导航菜单实例

这篇文章主要介绍了jQuery实现的动态伸缩导航菜单,实例分析了jQuery鼠标事件及animate、hide等方法的使用技巧,需要的朋友可以参考下

本文实例讲述了jQuery实现的动态伸缩导航菜单。分享给大家供大家参考。具体实现方法如下：

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
3. <html xmlns="http://www.w3.org/1999/xhtml"><head> 
4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
5. <title>jquery select</title> 
6. <script type="text/javascript" src="jquery-1.6.2.min.js"></script> 
7. <style type="text/css"> 
8. body {padding:10px; font-family:"宋体"} 
9. * {margin:0; padding:0; font-size:12px;} 
10. a{ color: #333;} 
11. ul,li { 
12. list-style-type:none; 
13. } 
14. .menu_list li a { 
15. display:block; line-height:30px; 
16. text-align:center; height:30px; 
17. background:#e8e8e8; border-bottom:1px solid #ccc; 
18. } 
19. .hover { 
20. background:#e8e8e8; 
21. } 
22. .div1{ 
23. height:200px; display:none; 
24. padding:5px; 
25. } 
26. .menu_list{ 
27. width:200px; background:#f2f2f2; 
28. border:1px solid #ccc; 
29. } 
30. </style> 
31. <script type="text/javascript"> 
32. $(document).ready(function() 
33. { 
34. $(".menu_list ul li").click(function() 
35. { 
36. if($(this).children(".div1").is(":hidden")) 
37. //判断对象是显示还是隐藏 
38. { 
39. if(!$(this).children(".div1").is(":animated")){ 
40. //如果当前没有进行动画，则添加新动画 
41. $(this).children(".div1").animate({height:'show'},1000) 
42. .end().siblings().find(".div1").hide(1000);} 
43. }else{ 
44. if(!$(this).children(".div1").is(":animated")){ 
45. $(this).children(".div1").animate({height:'hide'},1000) 
46. .end().siblings().find(".div1").hide(1000);} 
47. } 
48. } 
49. ); 
50. }); 
51. </script> 
52. <div class="menu_list" id="secondpane"> 
53. <ul> 
54. <li class=""> 
55. <a href="javascript:void(0);" class="a1">网页特效</a> 
56. <div class="div1">js特效,网页特效</div> 
57. </li> 
58. <li class=""> 
59. <a href="javascript:void(0);" class="a1">网页模板</a> 
60. <div class="div1">网页模板下载</div> 
61. </li> 
62. <li class=""> 
63. <a href="javascript:void(0);" class="a1" style="border:none;">联系我们 </a> 
64. <div class="div1" style="border-top:1px solid #ccc;">关于武林网</div> 
65. </li> 
66. </ul> 
67. </div> 
68. </body> 
69. </html> 

希望本文所述对大家的jQuery程序设计有所帮助。