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

发布于 2024-09-29 05:53:16 字数 887 浏览 3 评论 0原文

这可能是一个有点愚蠢的问题，但我刚刚开始在 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;
迭代增加#lorem2的高度

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

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

原文

This may be a bit silly question, but I just started doing pretty things in jQuery and I suddenly wondered how to solve a problem that I never even bothered looking into without the help of frameworks.

Suppose we have two div elements:

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

Now if we wanted to use an accordion effect to shrink the first div out of existence and grow the second one into existence, I'd assume we'd have the following simple logic:

Iteratively decrease the height of #lorem1 until it reaches 0
Set #lorem1 to display:none;
Set #lorem2 to display:block; height:0;
Iteratively increase the height of #lorem2

Then the problem... Increase the height of lorem2... until when? How do we know the final height of our element? We clearly can't pick a static value like "increase it until it reaches 400px", because the content of lorem2 might be more than 400 pixels tall. Alternatively if it's less than 400 pixels then any background colors/images or other elements on the page may not look right.

So how do we figure out when to stop our accordion?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

晨光如昨 2024-10-06 05:53:16

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

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

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

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

using jQuery you could use the handy toggle attribute:

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

I'm sure other js-libraries offer similar possibilities.

EDIT: Another approach would be animating the object until a height of auto. Or don't hide it via CSS, get the dimensions of the object via JS and hide it afterwards using JS. Now you know the dimensions to show it again.

回复收藏 0 原文