我发现这个帖子How to create sliding DIV on click?
但所有答案都是 Jquery 方法。有没有办法用 PURE CSS 来创建它？ 我还有一些其他的想法......
这是该帖子中示例的链接// http://shutterbugtheme.tumblr.com/
我也尝试过谷歌搜索，但唯一的结果是 jquery 方法...
【问题讨论】：
标签： css animation html slidedown
这在纯 CSS 中是不可能识别点击的。你可以使用 :hover 和一个过渡来做到这一点，但这与没有 javascript 的情况一样接近。
.hover
{
cursor: pointer;
position: relative;
z-index: 1;
}
.slide
{
position: absolute;
top: 0;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
}
.hover:hover + .slide
{
top: 50px;
}
http://jsfiddle.net/Kyle_/MaMu9/1/
请注意，虽然过渡是 CSS3，并且在 IE
编辑：在使用 CSS 中的 :focus 属性发布另一个答案之后：有一个警告是可能的：您必须在元素外部单击使其向下滑动以使其向上滑动，否则它可以正常工作。
请注意，该元素必须具有 tabindex='1'（或任何有意义的数字，具体取决于元素在文档中的位置）才能正常工作。
.hover:focus + .slide
{
top: 50px;
-webkit-transition: top 1s;
}
【讨论】：
:focus hack 或使用隐藏的复选框和分配的标签作为触发元素，请参阅：codepen.io/surjithctly/pen/pLDwe
运行此代码。
input {
display: none;
}
label {
cursor: pointer;
display: inline-block;
padding: 10px 20px;
border: 1px solid;
border-radius: 4px;
background: tomato;
color: #FFF;
font-family: arial;
-webkit-transition: background-color 0.1s, color 0.1s;
}
label:hover {
background: #blue;
color: #blue;
}
.test {
-webkit-transition: height .3s ease;
height: 0;
overflow: hidden;
width: 200px;
background: tomato;
margin-top: 10px;
color: #FFF;
}
input:checked + .test {
height: 100px;
}<label for="check">Click me</label>
<input id="check" type="checkbox">
<div class="test">
<p>I am some hidden text</p>
</div>【讨论】：
做同样事情的另一种方法：
.contents {
background: yellow;
color: rgba(0, 0, 0, .8);
padding: 20px;
margin:0;
}
.slide-up, .slide-down {
overflow:hidden;
}
.slide-up > div, .slide-down > div {
transform: translateY(-100%);
transition: .4s ease-in-out;
}
.slide-down > div {
transform: translateY(0);
}
【讨论】：
简单：
.contents {
background: yellow;
color: rgba(0, 0, 0, .8);
padding: 20px;
margin:0;
}
.slide-up, .slide-down {
overflow:hidden
}
.slide-up > div, .slide-down > div {
margin-top: -25%;
transition: margin-top 0.4s ease-in-out;
}
.slide-down > div {
margin-top: 0;
}
【讨论】：
这可以使用target 伪类来检测点击。
将按钮href设置为滑动div的id。
然后可以通过在slidingDiv上设置滑动div的高度来完成向下滑动：目标类在高度上使用css3 transition。
我认为原始按钮无法更改其 href 以使用纯 css 关闭滑动 div，但是您始终可以在滑动 div 上添加一个关闭按钮来关闭它。
此关闭按钮通过在滑动 div 类上添加相同的过渡来工作。
这是一个WORKING DEMO。
享受吧。
【讨论】：
这是可以做到的，虽然有点小技巧。保持状态的两个元素（在 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 过渡对其进行操作。
这是一个示例，当单击时会将 div 向下移动 50px
标记
<div tabindex='1' id='box'></div>
CSS
#box {
background-color:#3a6d90;
width:100px; height:100px;
transition: margin-top 2s;
-moz-transition: margin-top 2s; /* Firefox 4 */
-webkit-transition: margin-top 2s; /* Safari and Chrome */
-o-transition: margin-top 2s; /* Opera */
}
#box:focus {
margin-top:50px;
outline:0;
}
【讨论】：
这是一个很好的入门示例。你可以在底部看到，他们发布了他们使用的动画函数的源代码，尽管这是 javascript。
如果你想要纯 css，我会使用 ws3schools 多年来一直是优秀的资源，但请注意，你想要的效果是否有效很大程度上取决于浏览器的支持。
基本结构，让它们有效果，你只需要沿着body内的两个div的线条工作，在顶部隐藏和容器可见，并运行隐藏div的动画以显示推动另一个div向下，让它们都内联。
<body>
<div id="hidden-div"></div>
<div id="main-content-div"></div>
</body>
【讨论】：