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="https://www.jb51.net/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> <ul> <li> <a href="#">衬衫</a> <ul> <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> <a href="#">卫衣</a> <ul> <li><a href="#">开襟卫衣</a></li> <li><a href="#">套头卫衣</a></li> <li><a href="#">运动卫衣</a></li> <li><a href="#">童装卫衣</a></li> </ul> </li> <li> <a href="#">裤子</a> <ul> <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>
您可能感兴趣的文章: