Question

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

CSS：

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

示例1：此代码在打开到完整高度时不会为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);
  });

Answer 1

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

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

2）与上面相同我假设

3）当此代码应该切换回来时，它无法确定它应该变得比它现在更低。虽然不是很确定。可能是因为100％的“自动”高度设置错误。在切换回函数后，您可以检查firebug在计算选项卡上的值。可能它会给你一个线索

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

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

你再次只有100px的高度。

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

2 个答案: