js实现鼠标放在一级菜单，下滑出二级菜单

初始状态

鼠标放在tab4上

实现的代码如下

<html>

<head>
<title></title>
</head>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .tab{
            margin-left:-3px;
            float:left;
            width:60px;
            //height:20px;
            background:#ccc;
            text-align:center;
        }
        .tab .div-tab{
            
            
            border:1px solid #999;
        }
        .tab ul{
            display:none;
            overflow:hidden;
            background:blue;
            width:0px;
            height:0px;
        }
        .tab ul li{
            list-style:none;
        }
    
    </style>
    <script>
        window.onload=function(){
            
            var aDiv1=document.getElementsByClassName('tab');
            var aul=document.getElementsByTagName('ul');
            var timer
                for(var i=0;i<aDiv1.length;i++){
                    aDiv1[i].index=i;
                    var aIndex=aDiv1[i].index
                    aDiv1[i].onmouseover=function(){
                
                        for(var j=0;j<aDiv1.length;j++){
                            if(this.index!=j){
                                aul[j].style.height='0px'
                            }
                            
                        }
                        aul[this.index].style.display='block'
                        aul[this.index].style.width='60px';
                        var index=this.index
                        clearInterval(timer)
                        timer=setInterval(function(){
                            if(aul[index].offsetHeight>80){
                            }else{
                                aul[index].style.height=aul[index].offsetHeight+2+'px';
                            }
                        },30)
                    }
                    aDiv1[i].onmouseout=function(){
                    
                        var index=this.index
                        clearInterval(timer)
                        timer=setInterval(function(){
                            if(aul[index].offsetHeight<=0){
                            }else{
                                aul[index].style.height=aul[index].offsetHeight-2+'px';
                            }
                        },30)
                    }
                }
                
            
        }
        
        
    </script>
<body>
    <div class="tab">
        <div class="div-tab">tab1</div>
        <ul >
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <div class="tab">
        <div class="div-tab">tab2</div>
        <ul >
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <div class="tab">
        <div class="div-tab">tab3</div>
        <ul >
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <div class="tab">
        <div class="div-tab">tab4</div>
        <ul >
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</body>

</html>

 

posted @ 2018-10-23 22:29  大C文  阅读(815)  评论(0)    收藏  举报