在CSS3中完全展开/折叠

Question

在我负责前端开发的日子里，我只能通过CSS和JavaScript实现展开/折叠行为。 已经可以在CSS3中完全编写一个展开/折叠解决方案吗？

编辑： 我打算做的是类似this，但这里它正在使用jQuery。

Answer 1

如从here借用和稍微调整：

/* 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 
} 

Fiddle。

高级展示与淡入这里：（编辑，并不需要如关键帧在评论中指出了！）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; 
}