首页 > 代码库 > js实现二级菜单显示和收缩

js实现二级菜单显示和收缩

window.onload=function(){    var aLi=document.getElementsByTagName(‘li‘);    for(var i=0; i<aLi.length; i++){        aLi[i].onmouseover=function(){            var oSubNav=this.getElementsByTagName(‘ul‘)[0];            if(oSubNav){            var This=oSubNav;            clearInterval(This.time);            This.time=setInterval(function(){                    This.style.height=This.offsetHeight+16+"px";                    if(This.offsetHeight>=120)                    clearInterval(This.time);                },30)             }          }        //鼠标离开菜单,二级菜单动画收缩起来。             aLi[i].onmouseout=function(){            var oSubNav=this.getElementsByTagName(‘ul‘)[0];            if(oSubNav){            var This=oSubNav;            clearInterval(This.time);            This.time=setInterval(function(){                    This.style.height=This.offsetHeight-16+"px";                    if(This.offsetHeight<=0)                    clearInterval(This.time);                },30)             }          }            }}
<ul class="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></ul>

 

js实现二级菜单显示和收缩