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

Question

我正在建立一个高内容的WordPress博客，有一个侧栏的文章，显示该文章的摘录在悬停。我使用jQuery来获取元素高度(以避免slideDown中常见的跳转问题)，然后用下面的代码隐藏元素：

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

articleHeight();

然后执行以下代码，在调整窗口大小时尝试获取新的高度：

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

第一部分工作得很好，但它不会重新计算大小，导致它要么提供太多的空间，要么在调整大小时切断摘录。

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

任何关于这方面的想法都会非常有帮助。非常感谢。

Answer 1

有没有理由让$(this)保持原来的高度？

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

对于新的大小，您必须将其与$(window).height()进行比较，然后使用一些数学方法来区分它。

例如，如下所示：

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

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

Answer 2

您可能会发现outerHeight适合您，但我更倾向于使用display属性。内联块可能会帮你解决这个问题。

下面是jquery outerHeight文档http://api.jquery.com/outerHeight/

Answer 3

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

http://jsfiddle.net/RqqpK/1/

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

当然，使用addClass()比使用css({height：...})更好，而且当代码变得更大时，还会有其他一些改进，但这只是一个开始。祝好运