0

我正在开发的响应式设计网站。

我基本上有选项卡式内容，左侧（垂直）的选项卡和右侧的内容。

我有一个较小屏幕尺寸的媒体查询会改变内容的宽度。因此，当包含内容的文章宽度较小时，它们会自动增加高度，这是可以预料的，这正是我想要的。

我有一个脚本可以检查每篇文章的高度，并将所有其他文章与“最高”文章的高度相匹配。（我们不希望每次有人单击不同选项卡时都调整框的大小，这就是为什么要为所有选项卡设置高度）

这是问题所在：

当窗口上触发 resize 事件时，我运行相同的函数来计算高度并将文章与该高度匹配，但返回的文章高度$el.height();与之前的窗口大小相同（在触发 resize 事件之前）。

有谁知道这是为什么？

请注意，在下面的代码示例中，您可能会注意到一些奇怪之处，这只是因为这些片段是更大对象和应用程序的一部分。

function calculateHeight() {
    $el.find('article').each(function() {
        // height does not work correctly when display is none
        var elHeight = $(this).css({
            position: 'absolute',
            visibility: 'hidden',
            display: 'block'
        }).height();


        if (_height < elHeight) { _height = elHeight; }

        // Ok hide it normally again
        $(this).css({
            position: 'relative',
            visibility: 'visible',
            display: 'none'
        });

        elHeight = null;
    });
}

// resize event
$(window).resize(function() {
    /* FIXME: There is a bug here, resize is not working correctly */
    _height = 0;
    calculateHeight();
    setCalculatedSliderHeight();
});
4

1 回答 1

0

我发现了问题，我不敢相信我错过了。该脚本第一次运行，当然它为所有文章设置了手动高度。任何后续调用.height()都将返回设置的高度。

我需要做的就是将 calculateHeight() 函数的第一部分更改为：

function calculateHeight() {
    $el.find('article').each(function() {
        // height does not work correctly when display is none
        var elHeight = $(this).css({
            position: 'absolute',
            visibility: 'hidden',
            height: 'auto',  // Reset the height
            display: 'block'
        }).height();

...
于 2013-05-20T22:43:53.997 回答