向使用CSS的文本展開/摺疊添加過渡

我想單擊一行文本時添加平滑過渡，我所得到的只是即時展開。當我點擊第2行時，我也想讓第1行收回，因爲現在，如果點擊下一個/上一個，這些行保持展開狀態。如果可能，我寧願使用CSS或HTML。向使用CSS的文本展開/摺疊添加過渡

我試着擺弄周圍有過渡，這裏是沒有工作，在目前所有的行...

div:focus{ 
    transition: all 5s ease; 
}

我卡住了...任何幫助表示讚賞。提前致謝。

這裏有一個的jsfiddle： http://jsfiddle.net/jnsk3f2g/3/

來源

2015-10-19 Advokaten

爲什麼喜歡使用CSS或HTML？ JQuery使這個SOO變得簡單！ –

因爲我對js沒有任何知識，所以我使用的是基於WordPress的網站。所以我不知道在哪裏添加它和什麼.. – Advokaten

嘗試 - http://stackoverflow.com/a/22103238/483779 – Stickers

我已經改變了你的Fiddle，這樣它總是隻讓一行被擴展，並添加了轉換。但是，顯示的行高度是固定的。就像Will在his answer中所說的那樣，你也可以改變max-height，而不是固定的height我已經給出了這些元素，所以它更具動態性。

來源

2015-10-19 22:35:33

這正是我一直在尋找的。非常感謝你爲這個男人。我很高興世界上有像你們這樣的人！ :) Upvoting你。 – Advokaten

做，這是用JavaScript的最好方法。雖然CSS有一個可能的解決方案，但可以通過轉換可摺疊內容的最大高度來解決。看到這個fiddle。

.toggle-text + label + div { 
    max-height: 0; 
    overflow: hidden; 
    margin-bottom: 10px; 
} 

.toggle-text:checked + label + div { 
    max-height: 100px; 
} 

div { 
    transition: max-height 0.4s ease; 
}

它不像JS解決方案那樣可靠，因爲它需要一個硬編號，即最大高度。

來源

2015-10-19 22:31:22 Will

問題是，我有零知識在JS所以目前的CSS是我喜歡在跳入JS之前完全學習...... Transition正如我所希望的那樣工作。非常感謝你花時間做這件事。 Upvoting。 :) – Advokaten

向使用CSS的文本展開/摺疊添加過渡

回答

相關問題