首页 > 代码库 > js二级导航
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
js二级导航
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。