jquery - jQuery 的 .slideDown/Up() 究竟如何处理滑动到未知(自动)高度？

Question

我想向下滑动(显示)这个有 0px 的 DIV初始高度:

<div id="toslide" style="height:0px;overflow:hidden;"> ... various content </div>

但是最终高度未知，因为各种屏幕宽度、字体大小和其他影响内部布局的因素会影响目标高度。

如果我必须手动执行，我会用 visibility:hidden; 显示它, 测量高度然后 animate它达到了已知的高度(然而，这也有缺点)。

我用 jQuery 的 .slideDown() 得到了混合结果- 在文档中它有效，但在这种特殊情况下它对我不起作用。

jQuery 如何知道最终高度？

编辑:一种解决方法是使用另一个内部 div height:auto;将用于测量高度。

Answer 1

这个问题有点老了。我最初是在寻找相同问题的答案，您的编辑正是我要找的。

JSFiddle for all the goodies

$("a#moreRequests").on("click", function(){// click this and the div grows

//console.log("this hits");
var friends = $(".friendsDiv");
var divHeight = $(".auto").height();

if(friends.hasClass("grow")){// if the div has the class grow on it, then shrink
  friends.animate({
    height: "100px"
  },1000, function(){
    console.log("this is if it has the class .grow,");
  }).removeClass("grow");
} 
else{
  friends.animate({
    height: divHeight
  },1000, function(){
    console.log("this is if it doesn't has the class .grow div height: " + divHeight);
  }).addClass("grow");
}
return false;
});

希望对遇到同样问题的人有所帮助。