如果有一个需求要点击实现JQ的slideUp效果,不能要用到JQ,使用原生的JS,那你肯定想到的就是,通过点击给元素添加另外的样式 height 加高,或者减少,但是很明显,这个效果并不是很好,反而会很死板,没有动画的效果,像是实现了折叠面板的意思,但我们并不需要这个,有动画才好看!所以你肯定想到用 css3 的 transition 属性添加动画,这就对了!
完成了需求(有点偏题),但这次说的不是你用 JS 多6,用label 也能实现动画slideUP,不需要JS 岂不是很酷?!
看下面的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Document</title>
    <style type="text/css">
        .box {
            margin-top: 20px;
            -webkit-transition: height 0.3s;
            transition: height 0.3s;
        }
        /*.nav__input{
            display: none
        }*/
        .nav__input:checked ~ .box {
            height: 500px;
            -webkit-transition: height 0.3s;
            transition: height 0.3s;
        }
        .label{
            border-radius: 5px;
            background: #ddd
        }
        .box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <input type="checkbox" class="nav__input" id="nav_input">

    <label class="label" for="nav_input">点我一下试试~</label> 
    <div class="box"></div>
</body>
</html>

猛戳这里