我这里有一个siple代码：
$('.aktualita_sipky').toggle(function() {
$(this).parent().find('.aktualita_content').animate({
height: "100%",
}, 1500 );
}, function() {
$(this).parent().find('.aktualita_content').animate({
height: "120px",
}, 1500 );
});
现在当我点击它作为第一个'切换'时，它只是立即显示（没有动画），当我点击第二个'切换'时，它很好地向上滑动。
有没有办法用这个漂亮的动画将它滑到100％？
也许你可以这样做：
$height = $(window).height(); // returns height of browser viewport
//Or
$height = $(document).height(); // returns height of HTML document
//Or
$height = $(whatever).height();
$('.aktualita_sipky').toggle(function() {
$(this).parent().find('.aktualita_content').animate({
height: $height + 'px',
}, 1500 );
}, function() {
$(this).parent().find('.aktualita_content').animate({
height: $height + 'px',
}, 1500 );
});
也许你可以这样做：
$height = $(window).height(); // returns height of browser viewport
//Or
$height = $(document).height(); // returns height of HTML document
//Or
$height = $(whatever).height();
$('.aktualita_sipky').toggle(function() {
$(this).parent().find('.aktualita_content').animate({
height: $height + 'px',
}, 1500 );
}, function() {
$(this).parent().find('.aktualita_content').animate({
height: $height + 'px',
}, 1500 );
});
我的解决方法是在div中添加子元素的高度，添加一点来计算边距：
function() {
$('.accordionblock.open').removeClass('open');
var childrenheight = 0; $(this).children().each(function() {childrenheight += ($(this).height()*1.2)});
$(this).animate({height:childrenheight},300).addClass('open');
}
}
我在寻找解决方案时发现了这篇文章，Karim79有一个很好的建议，即使用变量和 height() 功能。
对我来说，我没有以100％的高度开始，因为我在样式表中定义了预设高度。所以我在扩展的函数中做的是我创建一个变量，它有一个查询步骤回到我想要扩展的特定元素，并将css高度更改为100％并将高度返回到变量。然后我将css设置为高度（我想我可以用vars告诉原始预设高度以及将来我编辑css）然后使用var with height运行动画功能。
function expandAlbum (){
var fullHeight = jQuery(this).prev('.albumDropdown').css('height' , '100%').height();
jQuery(this).prev('.albumDropdown').css('height' , '145px');
jQuery(this).prev('.albumDropdown').animate({'height' : fullHeight}, 1000, function(){jQuery(this).stop();});
jQuery(this).html('close');
}
我也不是很有经验，所以原谅邋code的编码。