需要改變的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/

我需要幫助從.first格的底部邊框做。第二格到.slideToggle。

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>