javascript - 滑动 div 并堆叠它们 (JavaScript)

Question

我正在制作我的网站，遇到了一些小问题。 This is how my code looks right now ，我想要做的是让“关于”框位于“主页”框的正下方，并让上面的框向下滑动，其中包含单击“主页”框时出现的说明。我该怎么做？

这是我的 JS 文件的代码。

$(document).ready(function (event) {
    var clicked=false;

    $(".one").on('click', function(){
        if(clicked)
        {
            clicked=false;
            $(".two").css({"top": -40}); //Slides upwards 40pixels       
        }
        else
        {
            clicked=true;
            $(".two").css({"top": 0});  //Slides righ under "one"      
        }
    });

    var clicked2=false;

    $(".three").on('click', function(){
        if(clicked2)
        {
            clicked2=false;
            $(".four").css({"top": -100}); //Slides upwards 40pixels       
        }
        else
        {
            clicked2=true;
            $(".four").css({"top": 0});  //Slides righ under "one"      
        }
    });
});

在一个完整的旁注中，我怎样才能让方框从页面顶部开始，我怎样才能让他的方框成为一个巨大的方框评分器，而不是一小条颜色？

Answer 1

你可以试试这个:

.container {
    overflow:hidden;
}
.one {
    position: relative;
    top: 0;
    background-color: #FFC300;
    z-index: 1;
    cursor:pointer;
}
.two {
    position: relative;
    top: -40px;
    background-color: yellow;
    z-index: -1;
    -webkit-transition: top 1s;
    -moz-transition: top 1s;
    -o-transition: top 1s;
    transition: top 1s;
}
.three{
    position: relative;
    top: 0;
    background-color: #E9A1B9;
    z-index: 1;
    cursor:pointer;
}

.four {
    position: relative;
    top: -18px;
    background-color: #02C9C9;
    z-index: -1;
    -webkit-transition: top 1s;
    -moz-transition: top 1s;
    -o-transition: top 1s;
    transition: top 1s;
}

DEMO HERE