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

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的存在而将第二个div扩大为存在，那么我假设我们将具有以下简单逻辑：

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

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

那么，如何确定何时停止手风琴呢？

Answer 1

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

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

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

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

Answer 2

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

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

问题描述

2 个解决方案

解决方案1
0 已采纳 2010-10-28 23:08:41

解决方案2
0 2010-10-28 23:34:58

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

问题描述

2 个解决方案

解决方案1 0 已采纳 2010-10-28 23:08:41

解决方案2 0 2010-10-28 23:34:58

解决方案1
0 已采纳 2010-10-28 23:08:41

解决方案2
0 2010-10-28 23:34:58