单击纯 CSS 时向下滑动 div？

Question

我发现这篇文章 如何在点击时创建滑动 DIV？

但是所有的答案都是 Jquery 方法。有什么方法可以用 PURE CSS 创建这个吗？我还有其他一些事情要考虑……

1. 我可以添加什么以使向下滑动的 div 在滚动时保持不动
2. 将触发动画的链接更改为“关闭”，以使 div 向上滑动

这是该帖子中示例的链接// http://shutterbugtheme.tumblr.com/

我也试过谷歌搜索，但唯一的结果是 jquery 方法……

原文由 KXXT 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是可以做到的，尽管有点 hack。保留状态的两个元素（在 CSS 中称为 :checked）是复选框和单选按钮元素。因此，如果您使用 for 属性将复选框与标签相关联并添加一个 div，则可以通过读取（隐藏）按钮的状态来获得结果：

 <div class=window>
<input type=checkbox class=toggle id=punch>
<label for=punch>Punch It, Chewie<label>
<div><p>Here’s my content. Beep Boop Blurp.</p></div>
</div>

和CSS：

 input.toggle { display: none; }
input.toggle ~ div { height: 0px; margin: .2rem; overflow: hidden; }
input.toggle:checked ~ div { height: 180px; }

原文由 pushingphotons 发布，翻译遵循 CC BY-SA 4.0 许可协议