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;
});

希望能帮助任何有同样问题的人。

Answer 2

你应该得到其中元素的.height（），将它们相加并使div的高度变为高度：）

http://api.jquery.com/height/

jQuery的.slideDown / Up（）如何处理幻灯片到未知（自动）高度？

2 个答案: