如何使用 Javascript 将原始高度返回到动态高度内容？答案

【问题标题】：How to return original height to dynamic-height content with Javascript?如何使用 Javascript 将原始高度返回到动态高度内容？
【发布时间】：2013-06-11 01:22:01
【问题描述】：

我正在使用 jQuery 来滚动我自己的可折叠元素插件，折叠元素的主体并让顶部栏暴露在点击中（用于切换）。我遇到的问题是在元素初始切换为“关闭”之后，一旦再次“打开”它，我无法弄清楚如何返回元素的原始高度。

这是一个例子：http://jsfiddle.net/sWf9J/1/

如您所见，它们从适当的高度开始。点击切换以折叠它们。然后再次点击切换以打开它们，但它们不会恢复到原来的高度。

我想在打开<div> 时需要将高度设置为auto，但这不起作用。如果我设置一个明确的高度，它就可以工作。

我错过了什么？

【问题讨论】：

animate 仅适用于 CSS 属性的数值

标签： jquery css height collapse

【解决方案1】：

可以使用data()：

http://jsfiddle.net/sWf9J/2/

function toggleModule(module){
       var selectModule = $('div.module[data-module=' + module + ']');
        if(!selectModule.data('originalHeight'))
            selectModule.data('originalHeight',selectModule.height());
        if(selectModule.hasClass('open')){
            selectModule.animate({'height':'40px'},200);
            selectModule.removeClass('open').addClass('closed');
        } else if(selectModule.hasClass('closed')){
            selectModule.animate({'height':selectModule.data('originalHeight')},200);
            selectModule.removeClass('closed').addClass('open');
        }
    }

【讨论】：

这很棒而且很简单，谢谢！只是出于好奇，这仅在 JS 中可行吗？没有 CSS 解决方法？
可能使用 CSS3 过渡

【解决方案2】：

您可以在页面加载时存储每个元素的height，并在以后使用它来切换回来。

/* Function: Toggle Modules for Mobile */
var heights = [];
$('[data-module=financial],[data-module=files],[data-module=correspondences],[data-module=agenda]').addClass('open').each(function (i) {
    heights[i] = $(this).height(); // the heights of each module is saved in an array
});

function toggleModule(module, t) {
    var selectModule = $('div.module[data-module=' + module + ']');
    if (selectModule.hasClass('open')) {
        selectModule.animate({
            'height': '40px'
        }, 200);
        selectModule.removeClass('open').addClass('closed');
    } else if (selectModule.hasClass('closed')) {
        selectModule.animate({
            'height': heights[t.index()] // here you get the heights from the array based on the element index
        }, 200);
        selectModule.removeClass('closed').addClass('open');
    }
}

/* Click module headers to toggle modules */
$('div.module header.module-header').click(function () {
    var thisModule = $(this).parent('div.module').data('module');
    toggleModule(thisModule, $(this)); // pass the element as an object to the funciton
});

$('button.toggle').click(function () {
    toggleModule('financial');
    toggleModule('files');
    toggleModule('correspondences');
    toggleModule('agenda');
});

FIDDLE

【讨论】：