1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>导航栏</title> 6 <!-- 7 list-style-type 设置或检索对象的列表项所使用的预设标记none:不适用项目符号 8 text-decoration 属性规定添加到文本的修饰。none表示无修饰 underline下划线等 9 line-height:检索或设置对象的行高，即字体最低端与字体内部顶端之间的距离 10 overflow:检索或这只对象处理溢出内容的方式 visible:溢出不做处理 hidden:隐藏且不出现滚动条 scroll:隐藏溢出且以滚动条的形式显示 auto:有溢出时出现滚动条 无溢出时不出现 11 text-indent:设置或检索对象中的文本的缩进 12 border-style：设置边框样式 13 border-设置或检索对象的边框宽度 14 font-weight:设置或检索对象的文本字体的粗细 15 16 --> 17 <style type="text/css"> 18 body{margin:0;padding:0 0 12px 0;font-size:12px;line-height:22px;font-family:"5b8b4f53","Arial Narrow";background:#fff;} 19 form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;} 20 input,select{font-size:12px;line-height:16px;} 21 img{border:0;} 22 ul,li{list-style-type:none;} 23 a {color:#00007F;text-decoration:none;} 24 a:hover {color:#bd0a01;text-decoration:underline;} 25 26 .box { 27 width: 150px; 28 margin: 0 auto; 29 } 30 .menu{ 31 overflow:hidden; 32 border-color: #C4D5DF; 33 border-style: solid; 34 border-width: 0 1px 1px; 35 } 36 /* lv1 */ 37 .menu li.level1 a{ 38 display: block; 39 height: 28px; 40 line-height: 28px; 41 background:#EBF3F8; 42 font-weight:700; 43 color: #5893B7; 44 text-indent: 14px; 45 border-top: 1px solid #C4D5DF; 46 } 47 .menu li.level1 a:hover{text-decoration:none;} 48 .menu li.level1 a.current{background:#B1D7EF;} 49 /* lv2 */ 50 .menu li ul{overflow:hidden;} 51 .menu li ul.level2{display:none;} 52 .menu li ul.level2 li a{ 53 display: block; 54 height: 28px; 55 line-height: 28px; 56 background:#ffffff; 57 font-weight:400; 58 color: #42556B; 59 text-indent: 18px; 60 border-top: 0px solid #ffffff; 61 overflow: hidden; 62 } 63 .menu li ul.level2 li a:hover{ 64 color:#f60; 65 } 66 </style> 67 <script src="../jquery/jquery-3.1.1.js" type="text/javascript"></script> 68 <!-- 69 .next()方法允许我们找遍元素集合中紧跟着这些元素的直接兄弟元素 70 parent()方法允许我们能够在DOM树中搜索到这些元素的父级元素 71 .siblings([selector]):获得匹配元素集合中每个元素的兄弟元素 72 .children([selector]):获得匹配元素集合中每个元素的子元素，选择器选择性筛选 73 74 --> 75 <script type="text/javascript"> 76 $(document).ready(function () { 77 $(".level1 > a").click(function(){ 78 $(this).addClass("current")//为当前元素添加current样式 79 .next().show()//下一个元素显示 80 .parent().siblings().children('a').removeClass("current")//父元素的同辈元素的子元素a移除current样式 81 .next().hide();//下一个元素隐藏 82 return false; 83 }); 84 }); 85 </script> 86 </head> 87 <body> 88 <div class="box"> 89 <ul class="menu"> 90 <li class="level1"> 91 <a href="#none">衬衫</a> 92 <ul class="level2"> 93 <li><a href="#none">短袖衬衫</a> </li> 94 <li><a href="#none">长袖衬衫</a> </li> 95 <li><a href="#none">短袖T靴</a> </li> 96 <li><a href="#none">长袖T靴</a> </li> 97 </ul> 98 </li> 99 <li class="level1"> 100 <a href="#none">卫衣</a> 101 <ul class="level2"> 102 <li><a href="#none">开襟卫衣</a> </li> 103 <li><a href="#none">套头卫衣</a> </li> 104 <li><a href="#none">运动卫衣</a> </li> 105 <li><a href="#none">童装卫衣</a> </li> 106 </ul> 107 </li> 108 <li class="level1"> 109 <a href="#none">裤子</a> 110 <ul class="level2"> 111 <li><a href="#none">短裤</a> </li> 112 <li><a href="#none">休闲裤</a> </li> 113 <li><a href="#none">牛仔裤</a> </li> 114 <li><a href="#none">免烫卡其裤</a> </li> 115 </ul> 116 </li> 117 </ul> 118 </div> 119 </body> 120 </html>