在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; 
}