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

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

javascript dom

Javascript 使用jQuery（手风琴技术）扩展内容。。。快速提问,javascript,dom,accordion,Javascript,Dom,Accordion,这可能是一个有点愚蠢的问题，但我刚刚开始在jQuery中做一些漂亮的事情，我突然想知道如何解决一个在没有框架帮助的情况下我甚至都不想去研究的问题假设我们有两个div元素： <body> <div id="lorem1" style="display:block; height:400px;"> Lorem ipsum... </div> <div id="lorem2" style="display:hidden

这可能是一个有点愚蠢的问题，但我刚刚开始在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

设置为

显示：无


将#lorem2
设置为显示：块；身高：0

迭代增加#lorem2
那么问题是。。。增加lorem2的高度。。。直到什么时候？我们如何知道元素的最终高度？显然，我们不能选择一个静态值，比如“增加它直到达到400px”，因为lorem2
的内容可能超过400像素高。或者，如果小于400像素，则页面上的任何背景色/图像或其他元素可能看起来不正确
那么，我们如何确定何时停止手风琴呢？
使用jQuery，您可以使用方便的切换属性：
$('#lorem').animate({
  height: 'toggle'
});

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

编辑：另一种方法是设置对象的动画，直到高度为auto
。或者不要通过CSS隐藏它，通过JS获取对象的尺寸，然后使用JS隐藏它。现在您知道了要再次显示它的维度。
我想.slideDown（）和.slideUp（）可以为您做到这一点：
没有离开jQuery有这个功能，但不幸的是，这并没有回答我最初的问题=）jQuery如何知道何时停止滑动？如果有人能弄清楚，我也很想知道！鉴于无法知道“auto”的高度，我认为在页面加载时存储维度可能是唯一的选择。除非可以在高度仍处于隐藏状态时将其设置为自动，否则请获取高度，然后将高度设置为0并取消隐藏。。。