滑动div'；并将其堆叠（JavaScript） 我正在做我的网站，我遇到了一个小的颠簸。我想做的是把“关于”框放在“主页”框的正下方，然后把上面的框和你点击“主页”框时的描述一起向下滑动。我该怎么做

这是我的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"      
        }
    });
});

在一个完整的旁注中，我怎样才能让方框从页面顶部开始，怎样才能使方框成为一个比一小块颜色更大的方框呢？

你可以试试这个：

.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;
}

---

我将使用负边距并切换一个简单的

。打开
上的
类。一个
和
分区。三个
分区：

$(".one, .three").click(function(){
    $(this).toggleClass('open');
});

CSS:

.one, .three {
    margin-bottom: -40px;
    -webkit-transition: margin-bottom 1s;
    -moz-transition: margin-bottom 1s;
    -o-transition: margin-bottom 1s;
    transition: margin-bottom 1s;
}
.open {margin-bottom: 0}

通过使用jQuery toggle（）函数为您完成这项工作，您可以将其简化一点。（编辑：也可以使用slideToggle（）获得不同的效果）

可选速度参数可以采用以下值：“慢”、“快”或毫秒

可选回调参数是在toggle（）完成后执行的函数

html

<div class="container">
     <div class="one">Main</div>
     <div class="two" style="display: none">Welcome to my page!</div>

     <div class="three">About</div>
     <div class="four" style="display: none">All about me</div>
</div>

js

.one {
    background-color: #FFC300;
    cursor:pointer;
}
.two {
    background-color: yellow;
}
.three{
    background-color: #E9A1B9;
    cursor:pointer;
}
.four {
    background-color: #02C9C9;
}

$(document).ready(function (event) {
  $(".one").on('click', function(){
      $(".two").toggle("slow");     
  });

  $(".three").on('click', function(){
      $(".four").toggle("slow");
  });
});

演示：

嘿！谢谢，这解决了一个问题，但是我有没有办法让about栏正好落在主栏下面，而不是留下主栏描述的空白？还有，你知道如何把盒子做得更大吗？（比如屏幕的四分之一变大）这样我就可以将文本居中并更改字体它可以用slideToggle（）来完成，就像打开和关闭它一样，我希望它能真正滑出而不是仅仅打开实际上，我想我会用slideToggle（）哈哈，谢谢你的主意！好啊你可以看到我的答案
$(document).ready(function (event) {
  $(".one").on('click', function(){
      $(".two").toggle("slow");     
  });

  $(".three").on('click', function(){
      $(".four").toggle("slow");
  });
});