使用CSS添加到文本展开/折叠的转换

Question

当我点击一行文字时，我想添加一个平滑的过渡，我得到的只是一个即时展开。当我点击第2行时，我也希望第1行缩回，就像现在一样，如果我单击下一个/上一个，则线条会保持展开状态。如果可能的话，我更喜欢使用CSS或HTML。

我试图摆弄过渡，这里的当前线路根本不起作用......

div:focus{
    transition: all 5s ease;
}

我被困了......感谢任何帮助。提前谢谢。

这是一个jsfiddle： http://jsfiddle.net/jnsk3f2g/3/

Answer 1

最好的方法是使用JavaScript。虽然有一个可能的CSS解决方案，通过转换可折叠内容的最大高度。请参阅此fiddle。

.toggle-text + label + div {
  max-height: 0;
  overflow: hidden;
  margin-bottom: 10px;
}

.toggle-text:checked + label + div {
  max-height: 100px;
}

div {
    transition: max-height 0.4s ease;
}

它不像JS解决方案那样可靠，因为它需要一个硬数字，即最大高度。

Answer 2

我已更改了您的Fiddle，因此它始终只允许展开一行，并添加了转换。但是，显示的线的高度是固定的。就像威尔在his answer中说的那样，你也可以改变max-height，而不是我给出这些元素的固定height，这样它就更有活力了。