css - 在 CSS3 中完全展开/折叠

Question

在我负责前端开发的时候，我只能通过 CSS 加 javascript 来实现展开/折叠行为。是否已经可以完全在 CSS3 中编写展开/折叠解决方案？

编辑：我打算做的是这样的事情，但这里使用的是 jQuery。

Answer 1

从这里借用并稍作调整：

/* Default State */
div {
   background: green;
   width: 400px;
   height: 100px;
   line-height: 100px;
   color: white;
   text-align: center;
    display: none;
}

/* Toggled State */
input[type=checkbox]:checked ~ div {
   display: block
}

小提琴。

此处使用 FadeIn 进行高级展示：（已编辑，不需要评论中指出的关键帧！）http://jsfiddle.net/Dxvf7/2/

/* Default State */
 div.container > div {
    background: green;
    width: 400px;
    height: 100px;
    line-height: 100px;
    color: white;
    text-align: center;
    opacity: 0;
    height: 0;
    -webkit-transition: all 2s linear;
    -moz-transition: all 2s linear;
    -o-transition: all 2s linear;
    transition: all 2s linear;
}
/* Toggled State */
 div.container > input[type=checkbox]:checked ~ div {
    opacity: 1;
    height: auto;
}