Question

我有一个DIV可以滑动到内容的高度，但由于某些原因，没有内容的div会计算错误的高度。

第二篇博客文章（Thoma）是扩展后的一个很好的例子。

http://dririser.co.uk/index.php

'data-height'是108px，但是它将DIV的高度设置为360px。内容工作正常的DIV，它设置了正确的高度，但似乎在没有内容的DIV上进行了错误的计算。

这基本上是代码的主旨。

将hight设置为div上的值。

$(".articleSlide").each(function () {
    var current = $(this);
    current.attr("data-height", current.height());
});

设置变量然后应用高度。

$(".showTeamList").toggle(function() {
    var open_height = $(".articleSlide").attr("data-height") + "px";
    $(this).parent().parent().animate({"height": open_height}, "slow" );
 }, function() {
    $(this).parent().parent().animate({"height": "35"}, "slow" );
});

Answer 1

你的问题是这一行：

$(".articleSlide").attr("data-height")

只会找到类.articleSlide的第一个元素，然后使用data-height。您希望它找到特定于该按钮的元素的data-height。就像您使用的那样：

 $(this).parent().parent().animate({"height": open_height}, "slow" );

尝试：

$(this).parents(".articleSlide").attr("data-height");

Answer 2

height（）“获取匹配元素集中第一个元素的当前计算高度。”

它具有正确的行为，因为计算的高度为none。你需要将元素包装在一个绝对定位的容器中，包含overflow：hidden; height：0;

高度未设置为div的实际高度

2 个答案: