需要更改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從底部邊框.first股利。

Answer 1

問題：

由於以這種方式的bottom:0 ， .second div的高度從底部開始。

解決方案：

嘗試用包裝器包裝.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; } 

 <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-wrapper"> <div class="second"> <p>other content</p> </div> </div> </div>