Question

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

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

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

我错过了什么？

Answer 1

可以使用data()完成：

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

FIDDLE

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

2 个答案: