手风琴菜单

Dear 丶 2022-05-08 02:40 220阅读 0赞

html

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>原生javascript手风琴导航</title></head>
    <link rel="stylesheet" type="text/css" href="css.css">
    <body>
    <div id="box">
        <ul>
            <li>
                <div class="nav_title"><span class="span1">One</span></div>
                <ul class="nav_content">
                    <li><a href="#">内容1</a> </li>
                    <li><a href="#">内容1</a> </li>
                    <li><a href="#">内容1</a> </li>
                </ul>
            </li>
            <li>
                <div class="nav_title"><span class="span1">Two</span></div>
                <ul class="nav_content">
                    <li><a href="#">内容2</a> </li>
                    <li><a href="#">内容2</a> </li>
                    <li><a href="#">内容2</a> </li>
                </ul>
            </li>
            <li>
                <div class="nav_title"><span class="span1">Three</span></div>
                <ul class="nav_content">
                    <li><a href="#">内容3</a> </li>
                    <li><a href="#">内容3</a> </li>
                    <li><a href="#">内容3</a> </li>
                </ul>
            </li>
        </ul>
    </div>
    <script src="squeezebox.js"></script>
    </body>
    </html>

css

*{
        margin: 0;
        padding: 0;
    }
    ul,li{
        list-style: none;
    }
    a{
        text-decoration: none;
        display: block;
        color: black;
        text-align: center;
    }
    body{
        background-color: rgb(45,44,65);
    }
    #box{
        margin: 50px auto;
        height: auto;
        width: 200px;
        border-radius: 5px;
        background-color: white;
    }
    span{
       line-height: 40px;
    }
    .nav_title{
        height: 40px;
        text-align: center;
        border-bottom: 1px solid grey;
        cursor: pointer;
    
    }
    a:hover{
        background-color: pink;
    }
    .nav_content li{
        line-height: 40px;
        border-bottom: 1px solid grey;
        cursor: pointer;
    
    }
    /**/
    .nav_content{
        overflow: hidden;
        background-color: rgba(0,0,0,0.7);
    }

javascript

addLoadEvent(spanHover)
    function addLoadEvent(func) {
        var oldonload=window.onload;
        if(typeof window.onload!="function")
        {
            window.onload=func;
        }
        else{
            window.onload=function () {
                oldonload();
                func();
            }
        }
    }
    function spanHover() {
        var nav_tit=document.getElementsByClassName("nav_title");
        var ul_content=document.getElementsByClassName("nav_content")
        var span1=document.getElementsByClassName("span1");
        for(var i=0;i<ul_content.length;i++)
        {
            ul_content[i].style.height=0+"px";
        }
        nav_tit[0].onclick=function(){
                back(0);
        }
        nav_tit[1].onclick=function(){
            back(1);
        }
        nav_tit[2].onclick=function(){
            back(2);
        }
        nav_tit[0].onmouseover=function () {
              span1[0].style.color="red";
            span1[1].style.color="black";
            span1[2].style.color="black";
            move(0);
        }
        nav_tit[1].onmouseover=function () {
            span1[1].style.color="red";
            span1[0].style.color="black";
            span1[2].style.color="black";
                move(1);
        }
        nav_tit[2].onmouseover=function () {
            span1[2].style.color="red";
            span1[1].style.color="black";
            span1[0].style.color="black";
                move(2);
        }
    
    }
    function back(i) {
        var ul_content=document.getElementsByClassName("nav_content");
        var h=parseInt(ul_content[i].style.height);
        var nav_tit=document.getElementsByClassName("nav_title");
        var span1=document.getElementsByClassName("span1");
        if(ul_content[i].style.index)
        {
            clearInterval(ul_content[i].style.index);
        }
        if(ul_content[i].style.index1)
        {
            clearInterval(ul_content[i].style.index1);
        }
        var speed=Math.ceil(h/10);
        var ss=parseInt(ul_content[i].style.height);
        ss=ss-speed;
        ul_content[i].style.height=ss+"px";
        if(parseInt(ul_content[i].style.height)==0)
        {
            span1[i].style.color="black";
            return;
        }
        ul_content[i].style.index1=setInterval(function () {
            back(i);
        },30)
    }
    function move(i) {
        var ul_content=document.getElementsByClassName("nav_content");
        var nav_tit=document.getElementsByClassName("nav_title");
        var h=parseInt(ul_content[i].style.height);
        if(ul_content[i].style.index)
        {
            clearInterval(ul_content[i].style.index);
        }
       var speed=Math.ceil((123-h)/10);
        h=h+speed;
        for(var k=0;k<ul_content.length;k++)
        {
            if(k==i)
            {
                ul_content[i].style.height=h+"px";
            }
            else
            {
                if(ul_content[k].style.index)
                {
                    clearInterval(ul_content[k].style.index);
                }
                var ss=parseInt(ul_content[k].style.height);
                if(ss!=0)
                {
                    ss=ss-speed;
                    ul_content[k].style.height=ss+"px";
                }
            }
        }
          if(parseInt(ul_content[i].style.height)>=123)
          {
             return;
          }
        ul_content[i].style.index=setInterval(function () {
            move(i);
        },30)
    }

![在这里插入图片描述][70]

[70]: /images/20220508/ff69ed97a77641999b4fe9228e406d80.png