js简单案例缓慢显示下拉菜单

最新推荐文章于 2021-10-10 20:43:06 发布

yaya1286249672

最新推荐文章于 2021-10-10 20:43:06 发布

阅读量1.4k

点赞数 1

本文链接：https://blog.csdn.net/yaya1286249672/article/details/53982081

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #menu{width:200px;height:25px;background:#f9c;}
        #item1{width:200px;}
        #item1 ul{display:none;background:#f00;}
        #item1 li{height:30px;}
    </style>
</head>
<body>
<ul id="menu">
    <li id="item1">菜单项目
        <ul>
            <li>子菜单项目</li>
            <li>子菜单项目</li>
            <li>子菜单项目</li>
            <li>子菜单项目</li>
        </ul>
    </li>
</ul>
</body>
<script>

    item1.onclick = function(){
        var c = item1.children[0];
        c.style.height = "0px";
        c.style.display= "block";
        c.style.overflow = "hidden";
        var timer = setInterval(function(){
            c.style.height = c.offsetHeight + 1 +"px";
            var t = parseInt(c.style.height);
            console.log(t);
            if(t >= 300){
                clearInterval(timer);
            }
        },10);





    }
</script>
</html>

yaya1286249672

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js简单案例缓慢显示下拉菜单

html lang="en">head> meta charset="UTF-8"> title>Titletitle> style> #menu{width:200px;height:25px;background:#f9c;} #item1{width:200px;} #item1 ul{display:none;bac
复制链接

扫一扫