滑下点击纯CSS DIV？ [英] Slide down div on click Pure CSS?

问题描述

我发现这个职位如何创建点击滑动DIV？

但是，所有的答案都jQuery方法。有什么办法用纯CSS创建这个？
 我还有其他几件事情记，以及...

But all the answers are Jquery methods. Is there any way to create this with PURE CSS? I have a couple other things in mind as well...

1. 我可以添加使滑下格留在原地滚动时


2. 更改触发动画为关闭，以使格滑动备份链路

下面是该职位的例子链接//
http://shutterbugtheme.tumblr.com/

Here is a link to the example in that post// http://shutterbugtheme.tumblr.com/

我也尝试使用Google，但唯一的结果是jQuery方法...

I've also tried googling but the only results are jquery methods...

推荐答案

这是可以做到，虽然它是一个黑客的一点点。保留状态（CSS简称：选中）的两个元素是复选框，单选按钮元素。所以，如果你一个复选框带有标签使用的属性和关联添加一个div，你可以通过阅读（隐藏）按钮的状态得到一个结果：

It can be done, although it's a little bit of a hack. The two elements that retain state (referred to in CSS as :checked) are the checkbox and radio button element. So if you associate a checkbox with a label by using a for attribute and add a div, you can get a result by reading the status of the (hidden) button:

<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 DIV？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！