Question

我正在制作我的网站，我遇到了一点路障。 This is how my code looks right now，我想要做的就是＆＃34;关于＆＃34;在＆＃34; Home＆＃34;正下方的方框框，并让上面的框滑下来，当您单击＆＃34; Home＆＃34;框。我怎么能这样做？

这是我的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

Answer 2

我会使用负边距并在.open和.one div上切换一个简单的.three类：

$(".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}

jsFiddle demo

Answer 3

您可以使用jQuery toggle（）函数为您完成工作，从而简化此操作。（编辑：你也可以使用slideToggle（）获得不同的效果）

$(selector).toggle(speed,callback);

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

可选的回调参数是在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>

<强> CSS

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

<强> JS

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

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

<强>样本：

https://jsfiddle.net/qbuatjrm/4/

滑动div并堆叠它们（JavaScript）

3 个答案: