具有行高、填充、不透明度和边距的可选CSS解决方案：

正文{背景色：亚麻；}主要的，主要的{背景色：白色；}[id^=“toggle_”]~.content{线条高度：0；不透明度：0；填充：0.5雷姆；过渡：.2s缓和；}[id^=“toggle_”]~.content>p{边距：0；过渡：.2s缓和；}[id^=“toggle_”]：选中~.content{不透明度：1；衬垫：.5rem；线高：1.5；}[id^=“toggle_”]：选中~.content p{边距底部：.75rem；}[id^=“toggle_”]+标签{显示：柔性；调整内容：间距；衬垫：0.5em 1em；背景：灯光转向蓝；边框底部：1px实心灰色；光标：指针；}[id^=“toggle_”]+标签：之前{content:“显示”；}[id^=“toggle_”]：选中+标签：之前{content:“隐藏”；}[id^=“toggle_”]+标签：之后{内容：“\25BC”；}[id^=“toggle_”]：选中+标签：之后{内容：“\25B2”；}<main>＜div＞<input type=“checkbox”id=“toggle_1”隐藏><label for=“toggle_1”hidden></label><div class=“content”><p>Lorem ipsum dolor坐amet，consectetur adipiscing elit。Duis dolor neque，准将leo ut，拍卖人tincidunt mauris。Nunc frigilla tincidunt metus，非孕妇lorem调味品非。Duis ornare purus nisl，位于埃格特拱门。整数lorem ante，porta vulputate dui ut，blandit tempor tellus。Proin facilisis bibendum直径，位于调味品中。Donec volutpat dui eu mollis vulputate。Nunc commodo lobortis Nunc at ultrices。吊耳中的吊耳直径。</p></div></div>＜div＞<input type=“checkbox”id=“toggle_2”隐藏><label for=“toggle_2”hidden></label><div class=“content”><p>我不能坐在拍卖行旁边。Vivamus sed nisi vite nibh调味品pulvinar eu vel lorem。生命的前阶段是一个非常容易的阶段。在外的大型流苏。做一个临时自由人。Donec sapien libero，lacinia sed aliquet ut，imperite finibus tellus。努克·泰勒斯·莱图斯，波苏雷侯爵的朗库斯，坦普斯坐在埃尼姆。Morbi等人使用了一种边缘数字丝绒。Donec commodo，est id accumsan cursus，diam dui hendrerit nisi，vel hendreritpurus dolor ut risus。Phasellus mattis egestas ipsum sed ullamcorper。在直径舌中，rhoncus vel enim et，impredite porta justo。Curabitur vulputate hendrerit nisl，et ultricies diam.Maecenas ac leo a diam cursus ornare nec eu quam。</p><p>Sed非vulputate purus，Sed consectetur odio。Sed non-nih frigilla，impressive odio nec，efficitur ex.Suspendiss ut dignissim enim。迈塞纳斯·费利斯·奥古斯特（Maecenas felis augus），坐在埃米特·塞姆·费利利亚（sem frigilla）上，坐在艾姆桑·费利利亚的笔尖上。Quisque posuere lacus tortor，ques malesuada magna elementum a.Nullam id purus in pre terstie tincidunt。Morbi luctus orci eu egestas dignissim。Sed tincidunt，libero quis scelerisque bibendum，ligula nisi gravida libero，id lacinia nulla leo in elit。</p><p>Aenean aliquam risus id consectetur sagitis。Aliquam Aliquam nisl eu预示着诅咒，意味着最大的痛苦。Aliquam ipsum dolor，tempor et justo ac，fermentum mattis dui。伊蒂安在波苏雷舌。Vestibulum tortor metus，viverra vitae mi non，laoret iaculis purus。Praesent vel semper笔尖。Curabitur一只刚果拉库斯。在et pellentesque lorem。Morbi posuere猫科动物，无直径壳核，无壳核。Vivamus ultricies、massa id sagitis consequat、sem mauris tincidunt nunc、eu vehicula augus quam ut mauris。</p></div></div>＜div＞<input type=“checkbox”id=“toggle_3”hidden><label for=“toggle_3”hidden></label><div class=“content”><p>Lorem ipsum dolor坐amet，consectetur adipiscing elit。Duis dolor neque，准将leo ut，拍卖人tincidunt mauris。Nunc frigilla tincidunt metus，非孕妇lorem调味品非。Duis ornare purus nisl，位于埃格特拱门。整数lorem ante，porta vulputate dui ut，blandit tempor tellus。Proin facilisis bibendum直径，位于调味品中。Donec volutpat dui eu mollis vulputate。Nunc commodo lobortis Nunc at ultrices。吊耳中的吊耳直径。</p><p>Sed非vulputate purus，Sed consectetur odio。Sed non-nih frigilla，impressive odio nec，efficitur ex.Suspendiss ut dignissim enim。迈塞纳斯·费利斯·奥古斯特（Maecenas felis augus），坐在埃米特·塞姆·费利利亚（sem frigilla）上，坐在艾姆桑·费利利亚的笔尖上。Quisque posuere lacus tortor，ques malesuada magna elementum a.Nullam id purus in pre terstie tincidunt。Morbi luctus orci eu egestas dignissim。Sed tincidunt，libero quis scelerisque bibendum，ligula nisi gravida libero，id lacinia nulla leo in elit。</p></div></div></main>

我能够做到这一点。我有一个.child和一个.parent div。子div完全符合父div的宽度/高度，具有绝对定位。然后设置平移属性的动画，将其Y值降低100%。它的动画非常流畅，没有任何问题或缺点，就像这里的任何其他解决方案一样。

类似这样，伪代码

.parent{ position:relative; overflow:hidden; } 
/** shown state */
.child {
  position:absolute;top:0;:left:0;right:0;bottom:0;
  height: 100%;
  transition: transform @overlay-animation-duration ease-in-out;
  .translate(0, 0);
}

/** Animate to hidden by sliding down: */
.child.slidedown {
  .translate(0, 100%); /** Translate the element "out" the bottom of it's .scene container "mask" so its hidden */
}

您可以在.parent上指定一个高度，单位为px，%，或保留为auto。这个div然后在向下滑动时屏蔽掉.child div。

没有最大高度，使用相对定位，在li元素上工作，并且是纯CSS：

除了Firefox，我没有在其他任何地方进行过测试，尽管从CSS来看，它应该可以在所有浏览器上运行。

小提琴：http://jsfiddle.net/n5XfG/2596/

CSS

.wrap { overflow:hidden; }

.inner {
            margin-top:-100%;
    -webkit-transition:margin-top 500ms;
            transition:margin-top 500ms;
}

.inner.open { margin-top:0px; }

HTML

<div class="wrap">
    <div class="inner">Some Cool Content</div>
</div>

您可以从height:0转换到height:auto，前提是您还可以提供最小高度和最大高度。

div.stretchy{
    transition: 1s linear;
}

div.stretchy.hidden{
    height: 0;
}

div.stretchy.visible{
    height: auto;
    min-height:40px;
    max-height:400px;
}

对于每个状态，使用具有不同过渡缓和和延迟的最大高度。

HTML格式：

<a href="#" id="trigger">Hover</a>
<ul id="toggled">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
<ul>

CSS:

#toggled{
    max-height: 0px;
    transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;
}

#trigger:hover + #toggled{
    max-height: 9999px;
    transition-timing-function: cubic-bezier(0.5, 0, 1, 0); 
    transition-delay: 0s;
}

参见示例：http://jsfiddle.net/0hnjehjc/1/

当我发布这篇文章时，已经有30多个答案了，但我觉得我的答案比杰克已经接受的答案要好。

我对简单地使用最大高度和CSS3转换产生的问题并不满意，因为正如许多评论人士所指出的，你必须将最大高度值设置得非常接近实际高度，否则会延迟。有关该问题的示例，请参阅此JSFiddle。

为了解决这个问题（虽然仍然不使用JavaScript），我添加了另一个转换转换的HTML元素：translateY CSS值。

这意味着同时使用了max-height和translateY：max-heith允许元素向下推它下面的元素，而translateY提供了我们想要的“即时”效果。最大高度的问题仍然存在，但其影响有所减弱。这意味着你可以为你的最大高度值设置一个更大的高度，而不用担心它。

总的好处是，在转换回（塌陷）时，用户可以立即看到translateY动画，因此最大高度需要多长时间并不重要。

解决方案为Fiddle

正文{字体系列：无衬线；}.切换{位置：相对；边框：2px实心#333；边界半径：3px；边距：5px；宽度：200px；}.切换标题{边距：0；填充：10px；背景色：#333；颜色：白色；文本对齐：居中；光标：指针；}.拨动高度{背景色：番茄；溢出：隐藏；过渡：最大高度。6s轻松；最大高度：0；}.tggle：悬停.tggle高度{最大高度：1000px；}.tggle转换{填充：5px；颜色：白色；转换：转换。4s轻松；变换：translateY（-100%）；}.tggle：悬停.tggle变换{变换：translateY（0）；}<div class=“toggle”><div class=“toggle header”>切换！</div><div class=“toggle height”><div class=“toggle transform”><p>内容</p＞<p>内容</p＞<p>内容</p＞<p>内容</p＞</div></div></div><div class=“toggle”><div class=“toggle header”>切换！</div><div class=“toggle height”><div class=“toggle transform”><p>内容</p＞<p>内容</p＞<p>内容</p＞<p>内容</p＞</div></div></div>