Question

这可能是一个有点愚蠢的问题，但我刚开始在jQuery中做了很多事情，我突然想知道如何在没有框架帮助的情况下解决一个我从未打扰过的问题。

假设我们有两个div元素：

<body>
    <div id="lorem1" style="display:block; height:400px;">
        Lorem ipsum...
    </div>
    <div id="lorem2" style="display:hidden;">
        dolor sit amet...
    </div>
</body>

现在，如果我们想要使用手风琴效果来缩小第一个div并使第二个变为存在，我假设我们有以下简单的逻辑：

迭代地降低#lorem1的高度，直到达到0
将#lorem1设为display:none;
将#lorem2设为display:block; height:0;
迭代地增加#lorem2

然后问题......增加lorem2的高度......直到什么时候？我们怎么知道元素的最终高度？我们显然无法选择静态值，例如“将其增加到400px”，因为lorem2的内容可能超过400像素高。或者，如果它小于400像素，那么页面上的任何背景颜色/图像或其他元素可能看起来都不正确。

那么我们如何确定何时停止我们的手风琴？

Answer 1

使用jQuery，您可以使用方便的toggle属性：

$('#lorem').animate({
  height: 'toggle'
});

我确信其他js-libraries提供了类似的可能性。

编辑：另一种方法是将对象设置为动画，直到auto的高度。或者不要通过CSS隐藏它，通过JS获取对象的尺寸，然后使用JS隐藏它。现在你知道尺寸再次显示它。

Answer 2

我认为.slideDown（）和.slideUp（）会为您做到这一点：http://api.jquery.com/slideDown/

用jQuery扩展内容（手风琴技术）......快速提问

2 个答案: