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

Question

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

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

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

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

我错过了什么？

Answer 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');
        }
    }

Answer 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');
});

小提琴