Question

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

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

articleHeight();

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

$(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属性。内联块可能会为您修复它。

Answer 3

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

您的文章元素现在扩展了额外的功能，您可以将其用于所需的行为并为每个元素存储状态。

当然，最好使用addClass（）而不是css（{height：...}），还有其他一些改进，当你的代码变大时你会受益，但这是一个开始。祝你好运