我最近一直在转换li元素的最大高度，而不是包装ul。

原因是，与大的最大高度相比，小的最大高度的延迟要少得多（如果有的话），而且我还可以使用ems或rems来设置与li字体大小相关的最大高度值，而不是任意的大数字。

如果我的字体大小是1rem，我会将最大高度设置为3rem（以容纳换行文本）。您可以在这里看到一个示例：

http://codepen.io/mindfullsilence/pen/DtzjE

杰克对最大高度动画化的回答很好，但我发现设置大的最大高度所导致的延迟很烦人。

可以将可折叠内容移动到内部div中，并通过获取内部div的高度来计算最大高度（通过JQuery，它将是outerHeight（））。

$('button').bind('click', function(e) { 
  e.preventDefault();
  w = $('#outer');
  if (w.hasClass('collapsed')) {
    w.css({ "max-height": $('#inner').outerHeight() + 'px' });
  } else {
    w.css({ "max-height": "0px" });
  }
  w.toggleClass('collapsed');
});

这里有一个jsfiddle链接：http://jsfiddle.net/pbatey/duZpT

这里有一个jsfiddle，它提供了所需的绝对最小代码量：http://jsfiddle.net/8ncjjxh8/

编辑：向下滚动以获得更新的答案我在做一个下拉列表，看到了这篇文章。。。很多不同的答案，但我决定分享我的下拉列表。。。它并不完美，但至少它将只使用css进行下拉！我一直在使用transform:translateY（y）将列表转换为视图。。。你可以在测试中看到更多http://jsfiddle.net/BVEpc/4/ 我把div放在每一个li后面，因为我的下拉列表是从上到下的，为了正确地显示它们，这是需要的，我的div代码是：

#menu div {
    transition: 0.5s 1s;
    z-index:-1;
    -webkit-transform:translateY(-100%);
    -webkit-transform-origin: top;
}

并且悬停是：

#menu > li:hover div {
    transition: 0.5s;
    -webkit-transform:translateY(0);
}

因为ul高度设置为可以超过你身体内容的内容，所以我为ul做了这件事：

 #menu ul {
    transition: 0s 1.5s;
    visibility:hidden;
    overflow:hidden;
}

并悬停：

#menu > li:hover ul {
     transition:none;
     visibility:visible;
}

转换后的第二次是延迟，它将在我的下拉列表被动画关闭后隐藏。。。希望以后有人能从中受益。编辑：我真不敢相信人们真的使用了这个原型！此下拉菜单仅用于一个子菜单，仅此而已！！我更新了一个更好的，可以有两个子菜单，用于ltr和rtl方向，支持IE8。LTR的FiddleRTL的Fiddle希望将来有人会发现这很有用。

我想添加一个关于如何扩展/折叠以保持文档流的示例，这个示例适用于使用tailwindcss的React应用程序

export function Collapse({ collapsed = true, children }) {
  return (
    <div className="grid">
      <div className="flex flex-col">
        <div className={`transition-all duration-500 overflow-hidden ${collapsed ? 'basis-0' : 'flex-1'}`}>
          {children}
        </div>
      </div>
    </div>
  );
}

深入阅读：https://stackoverflow.com/a/69871346/9226510

仅限CSS的灵活高度解决方案

我偶然发现了一个使用灵活行为的奇怪解决方案。它至少适用于Chrome和Firefox。

首先，高度转换仅在0和100%之间有效，两个数值。由于“auto”不是数值，因此分数在0和“自动”之间不存在增量。100%是灵活的值，因此不需要特定高度。其次，隐藏内容的外部容器和内部容器都必须设置为display：flex with flex direction：column。第三，外部容器必须具有高度属性。仅当所有内容都包含在外部容器中时，将其设置为0才能保持平滑过渡，因为弯曲行为优先于高度。Edit:Json建议使用height:fit内容，这样容器下面的任何内容都会被向下推。

.外部容器｛高度：0；显示：flex；flex方向：列；｝.内部容器｛display：flex；flex direction:column；｝.隐藏内容｛高度：0；不透明度：0；过渡：高度1s 0.5s进出，不透明度0.5s进出；/*过渡淡出：首先淡出不透明度，然后在延迟等于不透明度持续时间后收缩高度*/}.t触发器：悬停+.内部容器>.隐藏内容｛高度：100%；不透明度：1；过渡：高度1s进出，不透明度0.5s 1s进出；/*过渡：首先展开高度，然后在等于高度持续时间的延迟后淡入不透明度*/}<div class=“outer container”><a href=“#”class=“trigger”>悬停以显示内部容器的隐藏内容</a><div class=“内部容器”><div class=“hidden content”>这是隐藏内容。当由悬停触发时，其高度从0过渡到100%，这会将同一容器中的其他内容逐渐向下推</分区>＜div＞在同一个容器中，当隐藏内容的高度从0过渡到100%时，其他内容会逐渐向下推</分区></div></div>

按“运行代码段”按钮查看正在运行的转换。它只是CSS，没有特定的高度。

我只是为<li>元素设置动画，而不是为整个容器设置动画：

<style>
.menu {
    border: solid;
}
.menu ul li {
    height: 0px;
    transition: height 0.3s;
    overflow: hidden;
}
button:hover ~ .wrapper .menu ul li,
button:focus ~ .wrapper .menu ul li,
.menu:hover ul li {
    height: 20px;
}
</style>


<button>Button</button>
<div class="wrapper">
    <div class="menu">
        <ul>
            <li>menuitem</li>
            <li>menuitem</li>
            <li>menuitem</li>
            <li>menuitem</li>
            <li>menuitem</li>
            <li>menuitem</li>
        </ul>
    </div>
</div>

您可以添加ul:margin 0；高度为0。