需要在slideToggle上更改元素的位置

Question

$("button.filters").click(function(){
  $("div.second").slideToggle("slow");
});

.main {
  position: relative;
  display:block;
  height: 320px;
  color: #fff;
  background-color: grey;
}
.first {
  position: absolute;
  bottom: 15%;
  height: 70px;
  background-color: white;
}
.second {
  position: absolute;
  bottom: 0%;
  height: 30px;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div class="first">
    <p>some content</p>
    <button class="filters">filters</button>
  </div>
  <div class="second">
    <p>other content</p>
  </div>
</div>

请检查这个小提琴 https://jsfiddle.net/6d1t5jr8/

我需要帮助才能从.slideToggle div的底部边框向.first生成.second div。

Answer 1

问题：

由于./a.out 123-567-9 234-67891 3-5678-1- ---789123 5-7-9-2-4 67-9123-5 78-12345- 8-123-567 -1-3-5-7- 1 2 3 0 5 6 7 0 9 2 3 4 0 6 7 8 9 1 3 0 5 6 7 8 0 1 0 0 0 0 7 8 9 1 2 3 5 0 7 0 9 0 2 0 4 6 7 0 9 1 2 3 0 5 7 8 0 1 2 3 4 5 0 8 0 1 2 3 0 5 6 7 0 1 0 3 0 5 0 7 0 以这种方式，bottom:0 div的高度从底部开始。

解决方案：

尝试用包装器包装.second。因此幻灯片动画将从顶部开始。

像这样：

.second

jQuery(document).ready(function () {
  $("button.filters").click(function(){
    $("div.second").slideToggle("slow");
  });
});

.main {
  position: relative;
  display:block;
  height: 320px;
  color: #fff;
  background-color: grey;
}
.first {
  position: absolute;
  bottom: 15%;
  height: 70px;
  background-color: white;
}
.second-wrapper {
  position: absolute;
  bottom: 0%;
  height: 30px;
}

.second {
  display:none;
  background-color: green;
}

.second p {
  margin:0;
}