动感实现伸缩显示二级菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动感实现伸缩显示二级菜单</title>
    <link rel="stylesheet" href="css/base.css">
    <style>
        .menu{width: 250px;text-align: center;}
        .menu a{display: block;color: #ccc;font-size: 16px;}
        .head h2{background: #556a57;width: 100%;height: 45px;line-height: 45px;font-size: 20px;box-shadow: 2px 2px 4px #fff;}
        .sub a{background: #6f8971;padding: 10px 0;}
        .sub a:hover{background: #558259;}
        .sub{overflow: hidden;height: 0;}
    </style>
    <script src="js/js.js"></script>
</head>
<body>
    <ul class="menu" id="menu">
        <li class="sup">
            <a href="" class="head"><h2>一级菜单1</h2></a>
            <ul class="sub">
                <li><a href="">二级菜单1</a></li>
                <li><a href="">二级菜单2</a></li>
                <li><a href="">二级菜单3</a></li>
                <li><a href="">二级菜单4</a></li>
                <li><a href="">二级菜单5</a></li>
            </ul>
        </li>
        <li class="sup">
            <a href="" class="head"><h2>一级菜单2</h2></a>
            <ul class="sub">
                <li><a href="">二级菜单1</a></li>
                <li><a href="">二级菜单2</a></li>
                <li><a href="">二级菜单3</a></li>
                <li><a href="">二级菜单4</a></li>
            </ul>
        </li>
        <li class="sup">
            <a href="" class="head"><h2>一级菜单3</h2></a>
            <ul class="sub">
                <li><a href="">二级菜单1</a></li>
                <li><a href="">二级菜单2</a></li>
                <li><a href="">二级菜单3</a></li>
                <li><a href="">二级菜单4</a></li>
                <li><a href="">二级菜单5</a></li>
            </ul>
        </li>
        <li class="sup">
            <a href="" class="head"><h2>一级菜单4</h2></a>
            <ul class="sub">
                <li><a href="">二级菜单1</a></li>
                <li><a href="">二级菜单2</a></li>
                <li><a href="">二级菜单3</a></li>
            </ul>
        </li>
        <li class="sup">
            <a href="" class="head"><h2>一级菜单5</h2></a>
        </li>
    </ul>
</body>
</html>

window.onload=function(){
    var menu=document.getElementById("menu");
    var sups=menu.getElementsByClassName("sup");
    for(var i=0;i<sups.length;i++){
        (function(i){
            sups[i].onmouseover=function(){
                var sub=sups[i].getElementsByClassName("sub")[0];
                if(sub){
                sub.style.height="auto";
                }
        }
        })(i);
        (function(i){
            sups[i].onmouseout=function(){
                var sub=sups[i].getElementsByClassName("sub")[0];
                if(sub){
                sub.style.height="0";
                }
        }
        })(i);
    }
}

总结：console.log(sups[0]);

返回的是第一个sup类名的节点内容

延申：自动判断一级菜单是否有子菜单，有则添加下拉图标；js实现缓慢展开与收回；可以再写一个通用函数判断是获取id还是class还是元素标签，且可以是节点获取而不只是document获取？

动感实现伸缩显示二级菜单

猜你喜欢