Question

我有一个简单的jQuery网站，其中有四个块，当你按下一个块时，另一个块滑出它。这一切都有效，但是，大多数情况下，我想知道如何将滑块移出以移动其下方的其他元素。

＆＃13;

$(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();
  });


});

＆＃13;

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

＆＃13;

<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>

＆＃13;

四个街区：

滑出块：

正如您所看到的那样，当滑块被滑出时，它会覆盖红色和黄色块。相反，我希望滑块将红色和黄色块向下移动，然后从滑块下移出。

Answer 1

有一些问题。

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

让他们成为兄弟姐妹，并删除一些麻烦的CSS属性，如position:absolute和top，你应该更接近你想要的效果。

这是一个工作演示的JSBin：http://jsbin.com/titibununu/1/edit?html,css,js,output

如何在jQuery动画上移动其他元素

1 个答案: