用按钮改变div高度

Question

我需要一些脚本，例如在这个网站上运行的TYPO3扩展/模块：http://nyati-safari.dk/index.php?id=125（滚动到：Detaljeret Dagsprogram（inkluderet））。

div显示具有像素特定的高度，当单击箭头时，div会更改为contentpecific height，当div切换时箭头也会改变。

Answer 1

这样做：

var div = $('#div');

$('#arrow').click(function () {
    if (div.height() == 100) {
        autoHeight = div.css('height', 'auto').height();
        div.height(100).animate({
            height: autoHeight
        }, 500);
    } else {
        $('#div').animate({
            height: '100'
        }, 500);
    }
});

JSFiddle：http://jsfiddle.net/ZG8ug/5/

甚至可以执行以下操作：http://jsfiddle.net/ZG8ug/6/其中“隐藏”div在页面加载时很小，但在查看和返回时它更大。可能有助于用户区分已经查看过的内容。甚至可以反过来这样做，所以div在被查看时占用更少的空间。