javascript - 使用按钮更改 div 高度

Question

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

div 以像素特定的高度显示，当单击箭头时，div 更改为 contentspecific 高度，当 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 在查看时占用的空间更少。