当我slideUp()或slideDown()固定div时,它会跳转。
我读到它是高度问题,但无法解决它。也许我可以用填充物做点什么?
需要一些帮助:)
http://jsfiddle.net/sirjay/08ypLtp2/#tab-menu {
text-align: center;
padding-right: 40px;
position: fixed;
bottom: 0;
width: 100%;
margin-bottom: 0;
}
li {
padding: 15px;
display: inline-block;
margin: 0 10px;
width: 110px;
background-color: lightblue;
}
.t-hidden {
display: none;
padding: 10px;
}
$(function() {
$('#tab-menu li > a').click(function(e) {
e.preventDefault();
var x = $(this).closest('li').find('.t-hidden');
if (x.is(':visible')) {
x.slideUp();
} else {
x.slideDown();
}
});
});
<ul id="tab-menu">
<li>
<a href="#" class="btn">First</a>
<div class="t-hidden">
Hidden 1
</div>
</li>
<li>
<a href="#" class="btn">Second</a>
<div class="t-hidden">
Hidden 2
</div>
</li>
<li>
<a href="#" class="btn">Third</a>
<div class="t-hidden">
Hidden 3
</div>
</li>
</ul>
只需添加一个高度和宽度,就可以使每个应用slideUp()或slideDown()的元素动画流畅。
li {
padding: 15px;
display: inline-block;
margin: 0 10px;
width: 110px;
height:90px;
background-color: lightblue;
}
http://jsfiddle.net/a_incarnati/08ypLtp2/3/