能不能不要局限思维呀！！！！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹出收缩</title>
    <style>
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            background: antiquewhite;
        }

        #cont {
            text-align: center;
            position: absolute;
            top:0;
        }

        .xs, .yc {
            width: 100%;
            height: 100px;
            background: bisque;
            transition: top 1.5s;
        }


        #nav {
            width: 800px;
            height: 50px;
            background: aquamarine;
            margin: auto;

        }

        .up {
            font-size: 40px;
            color: white;
            cursor: pointer;
            display: inline-block;
        }

        .down {
            transform: rotate(180deg);
            font-size: 40px;
            color: white;
            cursor: pointer;
            display: inline-block;
        }
    </style>
</head>
<body>
<div id="cont" class="xs">
    <div id="nav">

    </div>
    <span id="up" onclick="upx()" class="up">^</span>
</div>
</body>
<script>{
    let nav = document.getElementById("nav");
    let up = document.getElementById("up");
    let cont = document.getElementById("cont");

    function upx() {

        if (up.className === "down") {
            down();
        } else {
            cont.style.top = "-50px";
            up.className = "down";
            cont.className = "yc";
        }
    }

    function down() {
        cont.style.top = "0";
        up.className = "up";
        cont.className = "xs"
    }


}
</script>
</html>



今天李先生心血来潮，虐了一把我这个菜虫~~~~久不写手生。写了一个点击

箭头div隐藏显示的效果，我傻的很 一直在嗑高度，忘记了还有top，菜虫路漫漫，写出来提醒下自己。忧桑~~~~

能不能不要局限思维呀！！！！！！

猜你喜欢