使用jQuery获取窗口调整大小时隐藏流体元素的高度答案

【问题标题】：Get height of hidden fluid element on window resize with jQuery使用jQuery获取窗口调整大小时隐藏流体元素的高度
【发布时间】：2012-01-12 12:29:55
【问题描述】：

我正在构建一个内容丰富的 WordPress 博客，其中的文章侧边栏显示悬停时该文章的摘录。我使用 jQuery 来获取元素高度（以避免 jQuery 常见的 slideDown 跳跃问题），然后使用以下代码隐藏元素：

function articleHeight() {
    $(".article").each(function() {
            $(this).css("height", $(this).height());
    });
}

articleHeight();

然后使用以下代码尝试并在调整窗口大小时获取新高度：

$(window).resize(function() {
    articleHeight();
});

第一部分效果很好，但它不会重新计算大小，导致它要么提供太多空间，要么在调整大小时剪掉摘录。

我意识到由于元素已经隐藏，它可能无法获得新的高度，但是我通过在jQuery中取消隐藏元素进行了测试，它仍然不会重新计算。

对此的任何想法都会非常有帮助。非常感谢。

【问题讨论】：

【解决方案1】：

是否有理由让$(this) 保持其已有的高度？

$(this).css("height", $(this).height() );

您必须将其与 $(window).height() 进行比较以获得新的尺寸，然后使用一些数学来区分它。

例如这样：

$(this).css("height", $(window).height() - 200 );

您可以将 200 更改为适合您的页面的内容。

【讨论】：

【解决方案2】：

您可能会发现 outerHeight 适合您，但我更倾向于使用 display 属性。内联块可能会为您解决它。

这里是 jquery outerHeight 文档 http://api.jquery.com/outerHeight/

【讨论】：

【解决方案3】：

我不完全确定 UI 将如何工作，但我创建了一个 jsFiddle，希望您可以使用它来解决您的问题：

您的文章元素现在扩展了额外的功能，您可以使用这些功能来实现所需的行为并为每个元素存储状态。

当然，使用 addClass() 比使用 css({height: ...}) 更好，当你的代码变大时，还有其他一些改进可以让你受益，但这是一个开始。祝你好运

【讨论】：