一、實現效果
1.初始化效果:未添加樣式和特效
2、添加CSS樣式
3、最終效果
二、JQuery代碼
<!--編寫JQuery代碼--> <script type="text/javascript"> $(document).ready(function(){ $(".level>a").click(function(){ $(this).addClass("current") //給當前元素添加current樣式 .next().show() //下一個元素顯示 .parent().siblings().children("a").removeClass("current") //父元素的同輩元素的子元素<a>移除“current”樣式 .next().hide(); //他們的下一個元素隱藏 return false; }) }) </script>
三、完整代碼
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-"> <title>JQuery制作導航欄</title> <script type="text/javascript" src="../JQuery庫文件/jquery-...min.js"></script> <!--引入JQuery庫文件--> <style type="text/css"> /*設置通用樣式*/ *{ padding: ; margin: ; } .box{ margin: auto; border: solid #BEBEBE px; width: px; } ul{ list-style: none; } a { color:#F; text-decoration:none; line-height: px; } /*level*/ .level a{ display: block; /*!!!轉換為塊狀元素*/ height: px; width: px; background-color: #EBFF; padding-left: px; border: solid px #BEBEBE; } .level a.current{ background-color:#BDEF; } /*level*/ .level a{ background: #ffffff; color: #EEE; border: none; } .level a:hover { color:red; } .level{ display: none; } </style> <!--編寫JQuery代碼--> <script type="text/javascript"> $(document).ready(function(){ $(".level>a").click(function(){ $(this).addClass("current") //給當前元素添加current樣式 .next().show() //下一個元素顯示 .parent().siblings().children("a").removeClass("current") //父元素的同輩元素的子元素<a>移除“current”樣式 .next().hide(); //他們的下一個元素隱藏 return false; }) }) </script> </head> <body> <div class="box"> <ul class="menu"> <li class="level"> <a href="#">襯衫</a> <ul class="level"> <li><a href="#">短袖襯衫</a></li> <li><a href="#">長袖襯衫</a></li> <li><a href="#">短袖T恤</a></li> <li><a href="#">長袖T恤</a></li> </ul> </li> <li class="level"> <a href="#">衛衣</a> <ul class="level"> <li><a href="#">開襟衛衣</a></li> <li><a href="#">套頭衛衣</a></li> <li><a href="#">運動衛衣</a></li> <li><a href="#">童裝衛衣</a></li> </ul> </li> <li class="level"> <a href="#">褲子</a> <ul class="level"> <li><a href="#">短褲</a></li> <li><a href="#">休閒褲</a></li> <li><a href="#">牛仔褲</a></li> <li><a href="#">免燙卡其褲</a></li> </ul> </li> </ul> </div> </body> </html>