使用 CSS 向文本扩展/折叠添加过渡答案

【问题标题】：Adding a transition to text expanding/collapsing using CSS使用 CSS 向文本扩展/折叠添加过渡
【发布时间】：2016-01-18 09:44:10
【问题描述】：

我想在单击一行文本时添加平滑过渡，我得到的只是即时展开。当我单击第 2 行时，我还希望第 1 行缩回，就像现在一样，如果我单击下一个/上一个行，这些行将保持展开。如果可能，我更喜欢使用 CSS 或 HTML。

我试着摆弄过渡，这是当前行根本不起作用...

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

我被困住了...任何帮助表示赞赏。提前致谢。

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

【问题讨论】：

为什么更喜欢使用 CSS 或 HTML？ JQuery 让这个 SOO 变得简单！
因为我对 js 的了解为零，而且我使用的是基于 wordpress 的网站。所以我不确定在哪里添加它等等..
试试 - stackoverflow.com/a/22103238/483779

标签： html css transition collapse

【解决方案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 解决方案可靠。

【讨论】：

问题是我对 JS 的了解为零，所以目前我想在进入 JS 之前充分学习 CSS ......转换就像我想要的那样工作。非常感谢你花时间做这个。赞成。 :)

【解决方案2】：

我已更改您的Fiddle，使其始终只允许展开一行，并添加了过渡。不过，显示的线条的高度是固定的。就像Will在his answer中所说的那样，你也可以改变max-height，而不是固定的height，我已经给出了这些元素，这样就更有活力了。

【讨论】：

这正是我想要的。非常感谢这个人。我很高兴世界上有你们这样的人！ :) 支持你。