jQuery在点击时更改容器的高度

Question

我有一个包含大量照片的容器，我想将容器的高度限制为440px，并在其下方显示“显示更多”链接。当用户点击显示更多时，我希望我的容器高度移动到880像素，然后是1320像素。

我的代码目前读起来像这样

$('#photo_container').css('max-height','440px');
$('#photo_container').css('overflow','hidden');
$('.show_more').click(function(){
    $('#photo_container').css('max-height','880px');
});

而html是：

<div id="photo_container">
    ....PHOTOS IN HERE
</div>
<div class="show_more">Show More</div>

Answer 1

将max-height更改为height：

$('#photo_container').css('height','440px');
$('#photo_container').css('overflow','hidden');
$('.show_more').click(function(){
    $('#photo_container').css('height','880px');
});