1. Realizing the effect
1. Initialization effect: no styles and special effects added
2. Add CSS style
3. Final effect
2. JQuery code
<!--编写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>
3. Complete code
<!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>