我找到了这篇文章 How to create sliding DIV on click?
但是所有的答案都是Jquery方法。有什么方法可以用 PURE CSS 创建这个吗？ 我还有其他一些想法......
- 我可以添加什么来使向下滑动的 div 在滚动时保持原样
- 将触发动画的链接更改为“关闭”，以使 div 向上滑动
这是该帖子中示例的链接// http://shutterbugtheme.tumblr.com/
我也试过谷歌搜索，但唯一的结果是 jquery 方法......
最佳答案
这是可以做到的，尽管有点 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; }
A further explanation and example that includes an animated open/close effect .
关于css - 单击纯 CSS 时向下滑动 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13412054/