$("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>
请检查这个 fiddle https://jsfiddle.net/6d1t5jr8/
我需要帮助从 .first
div 的底部边框将 .second div 制作成 .slideToggle
。
最佳答案
问题:
因为 bottom:0
这样,.second
div 的高度从底部开始。
解决方法:
尝试用 wrapper 包装 .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>
关于javascript - 需要改变元素在 slideToggle 上的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38940177/