一、實現效果
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>新聞熱點
疑難解答
