jquery实现二级导航下拉菜单效果实例

不念不忘少年蓝@ 2022-01-28 23:59 369阅读 0赞

大家都知道jQuery是一个框架，它对JS进行了封装，使其更方便使用。前面两篇博文分别是用CSS样式和JS实现的，那么这篇就用jQuery来实现二级下拉式菜单。

使用JQuery实现需要用到的知识有：

1.  1)使用$(function()\{...\})获取到想要作用的HTML元素。
2.  2)通过使用children()方法寻找子元素。
3.  3)通过使用show()方法来显示HTML元素。
4.  4)通过使用hide()方法来隐藏HTML元素。
5.  5)jQuery库引用方法:

第一种方法：将jQuery库下载到电脑上，然后引用，我下载的是jquery-1.7.1.min.js这个版本。

例如：

1.  <script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>

第二种方法：直接引用在线服务器上的jQuery库文件，比如谷歌服务器jQuery库，百度服务器jQuery库等。

例如：引用百度服务器上的jQuery库文件

1.  <script type="text/javascript" src="jquery/1.9.0/jquery.js"></script>

接下来看看制作的流程：

1.  1、调用jQuery库：编写代码，引用jquery库。由于谷歌已退出大陆，建议使用百度服务器的jQuery库。
2.  注意: 百度服务器的jQuery库地址:http://libs.baidu.com/jquery/1.9.0/jquery.js
3.  2 、编写显示子菜单函数，使用$,并通过class名获取一级菜单li，过children()找到li的孩子元素ul，使用show()方法,显示二级菜单。
4.  3、编写隐藏子菜单函数，使用$,并通过class名获取一级菜单li，过children()找到li的孩子元素ul，使用hide()方法, 隐藏二级菜单。
5.  4、做浏览器兼容性测试，至少五个浏览器。IE7,8,9，火狐，谷歌，2345浏览器等。

先来看看效果图：

![20190515083738130error][]

最后我们来看看代码的情况，和前面的区别不大：

HTML代码：

1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.   
3.  <html
4.  xmlns="http://www.w3.org/1999/xhtml">
5.   
6.  <head>
7.   
8.  <meta
9.  http-equiv="Content-Type"
10. content="text/html; charset=gb2312" />
11.  
12. <title>下拉菜单</title>
13.  
14. <link
15. rel="stylesheet"
16. type="text/css"
17. href="style.css" rel="external nofollow"
18. />
19.  
20. 
21.  
22. <script
23. src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
24.  
25. <script
26. type="text/javascript"
27. src="script.js"></script>
28.  
29. </head>
30.  
31.   
32.  
33. <body>
34.  
35. <div
36. id="nav"
37. class="nav">
38.  
39.   <ul>
40.  
41.     <li><a
42. href="\#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >网站首页</a></li>
43.  
44.    <li
45. class="navmenu"><a
46. href="\#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >课程大厅</a>
47.  
48.     <ul>
49.  
50.      <li><a
51. href="\#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >JavaScript</a></li>
52.  
53.      <li><a
54. href="\#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >jQuery</a></li>
55.  
56.      <li><a
57. href="\#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Ajax</a></li>
58.  
59.     </ul>
60.  
61.    </li>
62.  
63.    <li
64. class="navmenu"><a
65. href="\#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >学习中心</a>
66.  
67.     <ul>
68.  
69.      <li><a
70. href="\#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >视频学习</a></li>
71.  
72.      <li><a
73. href="\#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >案例学习</a></li>
74.  
75.      <li><a
76. href="\#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >交流平台</a></li>
77.  
78.     </ul>
79.  
80.    </li>
81.  
82.    <li><a
83. href="\#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >经典案例</a></li>
84.  
85.    <li><a
86. href="\#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >关于我们</a></li>
87.  
88.   </ul>
89.  
90. </div>
91.  
92. </body>
93.  
94. </html>

CSS样式表外部style.css文件代码：

1.  /\*CSS全局设置\*/
2.   
3.  \*\{
4.   
5.   margin:0;
6.   
7.   padding:0;
8.   
9.  \}
10.  
11. .nav\{
12.  
13.  background-color:\#EEEEEE;
14.  
15.  height:40px;
16.  
17.  width:450px;
18.  
19.  margin:0
20. auto;
21.  
22. \}
23.  
24. ul\{
25.  
26.  list-style:none;
27.  
28. \}
29.  
30. ul li\{
31.  
32.  float:left;
33.  
34.  line-height:40px;
35.  
36.  text-align:center;
37.  
38. \}
39.  
40. a\{
41.  
42.  text-decoration:none;
43.  
44.  color:\#000000;
45.  
46.  display:block;
47.  
48.  width:90px;
49.  
50.  height:40px;
51.  
52. \}
53.  
54. a:hover\{
55.  
56.  background-color:\#666666;
57.  
58.  color:\#FFFFFF;
59.  
60. \}
61.  
62. ul li ul li\{
63.  
64.  float:none;
65.  
66.  background-color:\#EEEEEE;
67.  
68. \}
69.  
70. ul li ul\{
71.  
72.  display:none;
73.  
74. \}
75.  
76. /\*为了兼容IE7写的CSS样式，但是必须写在a:hover前面\*/
77.  
78. ul li ul li a:link,ul li ul li a:visited\{
79.  
80.  background-color:\#EEEEEE;
81.  
82. \}
83.  
84. ul li ul li a:hover\{
85.  
86.  background-color:\#009933;
87.  
88. \}

JS脚本外部script,js文件代码：

1.  $(function()\{
2.   
3.    $(".navmenu").mouseover(function()\{
4.   
5.     $(this).children("ul").show(); 
6.   
7.    \})
8.   
9.     
10.  
11.   $(".navmenu").mouseout(function()\{
12.  
13.    $(this).children("ul").hide();
14.  
15.   \})
16.  
17. \})

[20190515083738130error]: /images/20220129/406b733ee5234d0fb43f82eb6ad24d80.png