一、实现效果
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>