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

posted @ 2015-01-16 12:35  MissBean  阅读(432)  评论(0)  编辑  收藏  举报