一、實現效果 1.初始化效果：未添加樣式和特效 2、添加CSS樣式 3、最終效果 二、JQuery代碼 三、完整代碼 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>JQuery製作導航欄 ...
一、實現效果
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>View Code
