轉換兄弟姐妹的高度：瞄準兄弟姐妹？

Question

我正在嘗試爲我的網站做一種手風琴，類似於this website，但沒有切換。

我正在使用的代碼是here。

我有基本的設置工作，但我似乎無法得到li正確過渡（如果有的話）的高度;我會很感激一些幫助。

該解決方案最好只使用CSS，但我願意使用JS/jQuery，如果這是唯一的/最好的方法。

我嘗試閱讀本網站上的其他問題來解決它，但我要麼做錯了什麼或解決方案沒有幫助。

Answer 1

一種方法是使用CSS3過渡（工作在現代瀏覽器），但它不會是可能的（有人可能會糾正我，如果我錯了）過渡到height: 0;height: 100%;所以，如果你不知道實際高度，其中一種方法是使用max-height代替。在這種情況下，您需要將max-height設置爲比以往更大的值。

因此，添加這樣的東西可能是你在找什麼？

li { 
    opacity: 0; 
    max-height: 0; 
} 

h2:target~li { /* Want to transition this */ 
    opacity: 1; 
    max-height: 100px; 
    -webkit-transition: max-height 1.0s; 
     -moz-transition: max-height 1.0s; 
     -ms-transition: max-height 1.0s; 
     -o-transition: max-height 1.0s; 
      transition: max-height 1.0s; 
}​ 

DEMO

在你的情況，如果你想過渡透明度屬性，以及你可以改變transition: max-height 1.0s;到transition: all 1.0s;這意味着你將轉換所有屬性。

這裏有一個鏈接，如果你想了解CSS3過渡： http://www.w3.org/TR/css3-transitions/