一、实现效果
1.初始化效果：未添加样式和特效
2、添加CSS样式
3、最终效果
二、JQuery代码
1 <!--编写JQuery代码-->
2 <script type="text/javascript">
3 $(document).ready(function(){
4 $(".level1>a").click(function(){
5 $(this).addClass("current") //给当前元素添加current样式
6 .next().show() //下一个元素显示
7 .parent().siblings().children("a").removeClass("current") //父元素的同辈元素的子元素<a>移除“current”样式
8 .next().hide(); //他们的下一个元素隐藏
9 return false;
10 })
11 })
12 </script>
三、完整代码
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>JQuery制作导航栏</title>
6 <script type="text/javascript" src="../JQuery库文件/jquery-1.12.1.min.js"></script> <!--引入JQuery库文件-->
7 <style type="text/css">
8 /*设置通用样式*/
9 *{
10 padding: 0;
11 margin: 0;
12 }
13 .box{
14 margin: auto;
15 border: solid #BEBEBE 1px;
16 width: 160px;
17 }
18 ul{
19 list-style: none;
20 }
21 a {
22 color:#00007F;
23 text-decoration:none;
24 line-height: 28px;
25 }
26
27 /*level1*/
28 .level1 a{
29 display: block; /*!!!转换为块状元素*/
30 height: 30px;
31 width: 150px;
32 background-color: #EBF3F8;
33 padding-left: 10px;
34 border: solid 1px #BEBEBE;
35 }
36 .level1 a.current{
37 background-color:#B1D7EF;
38 }
39 /*level2*/
40 .level2 a{
41 background: #ffffff;
42 color: #8E8E8E;
43 border: none;
44 }
45 .level2 a:hover {
46 color:red;
47 }
48 .level2{
49 display: none;
50 }
51 </style>
52
53 <!--编写JQuery代码-->
54 <script type="text/javascript">
55 $(document).ready(function(){
56 $(".level1>a").click(function(){
57 $(this).addClass("current") //给当前元素添加current样式
58 .next().show() //下一个元素显示
59 .parent().siblings().children("a").removeClass("current") //父元素的同辈元素的子元素<a>移除“current”样式
60 .next().hide(); //他们的下一个元素隐藏
61 return false;
62 })
63 })
64 </script>
65
66 </head>
67 <body>
68 <div class="box">
69 <ul class="menu">
70 <li class="level1">
71 <a href="#">衬衫</a>
72 <ul class="level2">
73 <li><a href="#">短袖衬衫</a></li>
74 <li><a href="#">长袖衬衫</a></li>
75 <li><a href="#">短袖T恤</a></li>
76 <li><a href="#">长袖T恤</a></li>
77 </ul>
78 </li>
79 <li class="level1">
80 <a href="#">卫衣</a>
81 <ul class="level2">
82 <li><a href="#">开襟卫衣</a></li>
83 <li><a href="#">套头卫衣</a></li>
84 <li><a href="#">运动卫衣</a></li>
85 <li><a href="#">童装卫衣</a></li>
86 </ul>
87 </li>
88 <li class="level1">
89 <a href="#">裤子</a>
90 <ul class="level2">
91 <li><a href="#">短裤</a></li>
92 <li><a href="#">休闲裤</a></li>
93 <li><a href="#">牛仔裤</a></li>
94 <li><a href="#">免烫卡其裤</a></li>
95 </ul>
96 </li>
97 </ul>
98 </div>
99 </body>
100 </html>
时间： 2024-08-14 08:38:13