将 DIV 设置为全高并切换回定义的高度答案

【问题标题】：Animate DIV to full height and toggle back to defined height将 DIV 设置为全高并切换回定义的高度
【发布时间】：2011-07-18 09:47:51
【问题描述】：

我试图在按下按钮时将 div 设置为完整高度，如果再次单击按钮则返回到其原始高度。 div 的全高是自动的，因为它包含具有不同字数的文本。我尝试执行以下代码，但无法正常工作。

CSS：

.category_brief{
    text-align:justify;
    height:100px;
    overflow:hidden;
}

示例 1：此代码在打开到 full height 时不对 div 进行动画处理，但在返回到旧高度时进行动画处理。

$(".slide").toggle(function(){
    $('.category_brief').animate({height:'100%'},200);
  },function(){
    $('.category_brief').animate({height:100},200);
  });

示例 2：此代码的输出与示例 1 相同

var toggle = true, oldHeight = 0;

$('.slide').click(function(event) {
    event.preventDefault();

    var $ele = $('.category_brief');
    var toHeight = ((toggle = !toggle) ? oldHeight : newHeight);

    oldHeight = $ele.height();
    var newHeight = $ele.height('auto').height();
    $ele.animate({ height: toHeight });

});

示例 3：此代码将 div 设置为完整高度但不切换。

    var slide = $('.slide');
    var slidepanel = $('.category_brief');
  // On click, animate it to its full natural height
  slide.click(function(event) {
      event.preventDefault();
    var oldHeight, newHeight;

    // Measure before and after
    oldHeight = slidepanel.height();
    newHeight = slidepanel.height('auto').height();

    // Put back the short height (you could grab this first
    slidepanel.height(oldHeight);
    slidepanel.animate({height: newHeight + "px"});
  });

如果可能的话，请提供一点解释，因为我是新手..

更新：由@chazm 的想法解决..

@chazm：谢谢你的想法。我通过结合第一个和第三个示例来实现它...这是代码以防万一有人需要它。

var slidepanel = $('.category_brief');
    $(".slide").toggle(function(){
    var oldHeight, newHeight;

    // Measure before and after
    oldHeight = slidepanel.height();
    newHeight = slidepanel.height('auto').height();

    // Put back the short height (you could grab this first
    slidepanel.height(oldHeight);
    slidepanel.animate({height: newHeight + "px"})
  },function(){
    $('.category_brief').animate({height:100},300);
  });

【问题讨论】：

@Wesley Murch：它现在被删除了......

标签： javascript animation height jquery-animate

【解决方案1】：

使用“自动”高度总是很棘手。我认为您的示例中存在不同的问题。

1) 浏览器无法定义正确的 100% 高度。可能的解决方案 - 为其所有父母定义高度。将其设置为 100%（直到 html 标记）或将最近的父级设置为相对（因为高度是从最近的相对父级计算的）。如果您想将 div 设置为整个页面的 100% - 考虑绝对定位

2)和上面我假设的一样

3) 当这段代码应该切换回来时，它无法确定它应该变得比现在低。不完全确定为什么。可能是因为 100% 的“自动”高度设置错误。切换回该功能后，您可以在 firebug 中检查它在计算选项卡上的值。或许它会给你一个线索

尝试结合 2) 和 3)。这个想法 - 如果切换为真（应该降低）然后设置 newHeight = slidepanel.height('100')。

【讨论】：

【解决方案2】：

解决方案取决于您的实施需求。如果您知道起初 div 的高度应为 100px 等，并且当您单击时，它会最大化到未知高度，则以下解决方案将起作用。如果你的结构类似于

<div class="outer">
    <div class="wrapper">Content of unknown length here</div>
</div>

和css

div.wrapper { position:relative; height:100px; overflow:hidden; }
div.outer { position:absolute; height:auto; }

然后你会得到一个高度为 100px 的 div，其中不适合 100px 的内容被截断。现在，当您按下所需的按钮时，您可以获得包装 div 的高度，因为它与它的内容一样长（即使您只看到顶部 100px）并根据它设置外部 div 的高度。像这样

var newHeight = $('div.wrapper').height();
$('div.outer').animate({height:newHeight},200);

然后会为外部 div 设置动画以显示全部内容。当你再次点击按钮时，你可以这样做

$('div.outer').animate({height:'100px'},200);

你将再次只有 100 像素的高度。

【讨论】：