js二级导航
js寫二級導航要點
1.ul li
2.js獲取元素
3.setInterval(function(),time);
代碼如下
1 <style type="text/css"> 2 ul,li,body{margin:0;padding: 0;} 3 #nav{width: 500px;margin: 10px auto;} 4 ul li{list-style: none;} 5 .clear{clear: both;} 6 #nav>li{float: left;position: relative;} 7 li a{display: block;width: 100px;height: 30px;line-height: 30px;text-align:center;background-color: #ccc;text-decoration: none;color: #333;} 8 li a:hover{background: #c66;color: #fff;} 9 li ul{height: 0px;overflow: hidden;position: absolute;top:30px;} 10 </style> 11 <body> 12 <ul id="nav"> 13 <li> 14 <a href="#">一級菜單</a> 15 <ul class="subNav"> 16 <li><a href="#">二級菜單</a></li> 17 <li><a href="#">二級菜單</a></li> 18 <li><a href="#">二級菜單</a></li> 19 <li><a href="#">二級菜單</a></li> 20 </ul> 21 </li> 22 <li> 23 <a href="#">一級菜單</a> 24 <ul class="subNav"> 25 <li><a href="#">二級菜單</a></li> 26 <li><a href="#">二級菜單</a></li> 27 <li><a href="#">二級菜單</a></li> 28 <li><a href="#">二級菜單</a></li> 29 </ul> 30 </li> 31 <li><a href="#">一級菜單</a></li> 32 <li><a href="#">一級菜單</a></li> 33 <li><a href="#">一級菜單</a></li> 34 <div class="clear"></div> 35 </ul> 36 <script type="text/javascript"> 37 var nav=document.getElementById("nav"); 38 var oLi=nav.getElementsByTagName("li"); 39 //console.log(oLi.length); 40 for(var i=0;i<oLi.length;i++){ 41 oLi[i].onmouseover=function(){ 42 var oUl=this.getElementsByTagName("ul")[0]; 43 if(oUl){ 44 var This=oUl; 45 clearInterval(This.time); 46 This.time=setInterval(function(){ 47 This.style.height=This.offsetHeight+10+"px"; 48 if(This.offsetHeight>=150){ 49 clearInterval(This.time); 50 } 51 },10); 52 } 53 } 54 oLi[i].onmouseout=function(){ 55 var oUl=this.getElementsByTagName("ul")[0]; 56 if(oUl){ 57 var This=oUl; 58 clearInterval(This.time); 59 This.time=setInterval(function(){ 60 This.style.height=This.offsetHeight-10+"px"; 61 if(This.offsetHeight<=0){ 62 clearInterval(This.time); 63 } 64 },10); 65 } 66 } 67 } 68 </script>遇到的幾個問題：
1，寫的時候setInterval忘了寫第二個時間參數，結果在火狐里出現了二級導航顯示不全的問題；
2，忘記注釋掉console.log(),在IE6 7 8 9里二級導航不出來，注釋掉后就好了。
Note：IE 9開始 才支持 ?console.log
轉載于:https://www.cnblogs.com/MissBean/p/4228360.html
總結
- 上一篇： MySql 错误 Err [Imp] 1
- 下一篇： 修改NavigationBar的分根线颜