js二级导航

js写二级导航要点

1.ul li

2.js获取元素

3.setInterval(function(),time);

代码如下

 <style type="text/css">

 ul,li,body{margin:0;padding: 0;}

 #nav{width: 500px;margin: 10px auto;}

     ul li{list-style: none;}

     .clear{clear: both;}

     #nav>li{float: left;position: relative;}

     li a{display: block;width: 100px;height: 30px;line-height: 30px;text-align:center;background-color: #ccc;text-decoration: none;color: #333;}

     li a:hover{background: #c66;color: #fff;}

     li ul{height: 0px;overflow: hidden;position: absolute;top:30px;}

 </style>

 <body>

     <ul id="nav">

         <li>

             <a href="#">一级菜单</a>

             <ul class="subNav">

                 <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 class="subNav">

                 <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></li>

         <li><a href="#">一级菜单</a></li>

         <li><a href="#">一级菜单</a></li>

         <div class="clear"></div>

     </ul>

     <script type="text/javascript">

     var nav=document.getElementById("nav");

     var oLi=nav.getElementsByTagName("li");

     //console.log(oLi.length);

     for(var i=0;i<oLi.length;i++){

         oLi[i].onmouseover=function(){

             var oUl=this.getElementsByTagName("ul")[0];

             if(oUl){

                 var This=oUl;

                 clearInterval(This.time);

                 This.time=setInterval(function(){

                     This.style.height=This.offsetHeight+10+"px";

                     if(This.offsetHeight>=150){

                         clearInterval(This.time);

                     }

                 },10);

             }

         }

         oLi[i].onmouseout=function(){

             var oUl=this.getElementsByTagName("ul")[0];

             if(oUl){

                 var This=oUl;

                 clearInterval(This.time);

                 This.time=setInterval(function(){

                     This.style.height=This.offsetHeight-10+"px";

                     if(This.offsetHeight<=0){

                         clearInterval(This.time);

                     }

                 },10);

             }

         }

     }

     </script>

遇到的几个问题：

1，写的时候setInterval忘了写第二个时间参数，结果在火狐里出现了二级导航显示不全的问题；

2，忘记注释掉console.log(),在IE6 7 8 9里二级导航不出来，注释掉后就好了。

Note：IE 9开始才支持 console.log

相关文章