如何在jQuery动画中移动其他元素?

I have a simple jQuery website, where there are four blocks, when you press a block, another block slides out of it. It all works, for the most part, however, i was wondering how i could get the block that slides out to move the other elements below it down.

我有一个简单的jQuery网站，有四个区块，当你按下一个区块，另一个区块就会滑出。所有这些都是有效的，但是，在大多数情况下，我想知道如何让滑出的块移动到它下面的其他元素。

$(document).ready(function() {

  var height = 145;
  var speed = 600;
  $("#one").animate({
    width: "100%",
    height: height
  }, speed, function() {
    $("#two").animate({
      width: "100%",
      height: height
    }, speed, function() {
      $("#three").animate({
        width: "100%",
        height: height
      }, speed, function() {
        $("#four").animate({
          width: "100%",
          height: height
        }, speed);
      });
    });
  });

  $("#one").click(function() {
    $(".dropDown").not("#oneS").slideUp();
    $("#oneS").slideToggle();

  });

  $("#two").click(function() {
    $(".dropDown").not("#twoS").slideUp();
    $("#twoS").slideToggle();
  });

  $("#three").click(function() {
    $(".dropDown").not("#threeS").slideUp();
    $("#threeS").slideToggle();
  });

  $("#four").click(function() {
    $(".dropDown").not("#fourS").slideUp();
    $("#fourS").slideToggle();
  });


});

@charset "utf-8";
 .selectors {
  position: relative;
  border-radius: 30px;
}
#one {
  background-color: blue;
  height: 400px;
  width: 100px;
  margin-bottom: 10px;
}
#two {
  background-color: red;
  height: 400px;
  width: 100px;
  margin-bottom: 10px;
}
#three {
  background-color: yellow;
  height: 400px;
  width: 100px;
  margin-bottom: 10px;
}
#four {
  background-color: green;
  height: 400px;
  width: 100px;
}
.dropDown {
  background-color: #E9E9E9;
  height: 300px;
  width: 100%;
  position: absolute;
  //overflow:auto;
  border-radius: 10px;
  z-index: 1;
}
#oneS {
  display: none;
  top: 150px;
}
#twoS {
  display: none;
  top: 150px;
}
#threeS {
  display: none;
  top: 150px;
}
#fourS {
  display: none;
  top: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <script type="text/javascript" src="jQuery.js"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
</head>

<body>

  <div id="one" class="selectors">
    <div id="oneS" class="dropDown"></div>
  </div>

  <div id="two" class="selectors">
    <div id="twoS" class="dropDown"></div>
  </div>

  <div id="three" class="selectors">
    <div id="threeS" class="dropDown"></div>
  </div>

  <div id="four" class="selectors">
    <div id="fourS" class="dropDown"></div>
  </div>

</body>

</html>

Four blocks:

四块:

Slid out block:

滑块:

As you can see when the block is slid out, it covers over the red and yellow block. Instead i would like the sliding block to move the red and yellow block down the page, and out from under the sliding block.

你可以看到当方块滑出时，它覆盖在红色和黄色方块上。相反，我希望滑块从滑块下面移动红色和黄色块。

1 个解决方案

#1

There's a few things wrong.

有几件事不对劲。

The general issue is that you're fighting the natural behavior of the HTML since the .dropDown elements are children of the .selectors elements. You would get closer to your desired result if they were siblings.

一般的问题是，您正在与HTML的自然行为进行斗争，因为. dropdown元素是.selector元素的子元素。如果他们是兄弟姐妹，你会更接近你想要的结果。

Make them siblings and remove some troublesome CSS properties like position:absolute and top and you should get closer to your desired effect.

使它们为兄弟，并删除一些麻烦的CSS属性，如位置:绝对和顶部，你应该更接近你想要的效果。

Here is a JSBin of a working demo: http://jsbin.com/titibununu/1/edit?html,css,js,output

下面是一个工作演示的JSBin: http://jsbin.com/titibununu/1/edit?html、css、js，输出

#1