标签：
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
标签：
原文地址：http://www.cnblogs.com/MissBean/p/4228360.html
