zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    大型web系统数据缓存设计
    配置AndroidStudio
    android-studio 安装gradle
    Gradle的简介与安装
    史上最详细的Android Studio系列教程四--Gradle基础
    Android SDK
    如何让猎头找到你
    android-volley-manager
    Android Studio导入Project的方法
    设置Android Studio启动时可选最近打开过的工程
  • 原文地址:https://www.cnblogs.com/MissBean/p/4228360.html
Copyright © 2011-2022 走看看