我有一系列 div-webkit-transform
从负边距顶部向下滑动到屏幕上的某个位置。问题是,如果没有对它们应用负边距顶部,它们最终会停留在通常会坐的位置。
这意味着如果我显示第二个 div,它上面有一个与第一个 div 大小相同的空白空间。为了解决这个问题,我可以对第二个 div 应用负边距顶部,但我认为那很混乱。
我主要担心的是,如果 dropdiv1 的高度发生变化,那么我将不得不重置 click 函数上的值,以使其他 div 在显示时再次正确排列。
有没有办法修改-webkit-transform
合并 postion:absolute?
我目前的代码是:
CSS:
#dropdiv1 {
-webkit-transform: translate(0, -3000px);
-webkit-transition: all ease-in 1s;
}
#dropdiv2 {
-webkit-transform: translate(0, -3400px);
-webkit-transition: all ease-in 1s;
}
#dropdiv3 {
-webkit-transform: translate(0, -4200px);
-webkit-transition: all ease-in 1s;
}
查询:
$('#clickme1').click(
function() {
$('#dropdiv1').css('-webkit-transform','translate(0, -335px)');
});
$('#clickme2').click(
function() {
$('#dropdiv2').css('-webkit-transform','translate(0, -2335px)');
});
$('#clickme3').click(
function() {
$('#dropdiv3').css('-webkit-transform','translate(0, -3300px)');
});
HTML:
<ul class="mainmenu">
<li><a id="clickme1" href="#">Click Me 1</a></li>
<li><a id="clickme2" href="#">Click Me 2</a></li>
<li><a id="clickme3" href="#">Click Me 3</a></li>
</ul>
<div class="showdata" id="dropdiv1">
Lots of random text....
</div>
<div class="showdata" id="dropdiv2">
Lots of random text....
</div>
<div class="showdata" id="dropdiv3">
Lots of random text....
</div>