형제 전환 시점 : 형제 타겟팅?

Question

나는 내 웹 사이트에 대해 일종의 아코디언을 시도하고 있는데, 이는 this website에있는 것과 비슷하지만 전환하지 않아도됩니다.

내가 작업하고있는 코드는 here입니다.

기본 설정이 작동하지만 정상적으로 전환하려면 li 높이를 얻지 못하는 것 같습니다. 나는 약간의 도움에 감사드립니다.

솔루션은 CSS 만 사용하는 것이 좋지만 JS/jQuery를 사용하는 것이 유일한 방법이라면 기꺼이 사용할 것입니다.

이 사이트의 다른 질문을 읽으려고했지만 잘못되었거나 해결책이 도움이되지 않았습니다.

Answer 1

한 가지 방법은 CSS3 전환을 사용하는 것입니다 (최신 브라우저에서 작동). 그러나 height: 0;에서 height: 100%;으로 전환하는 것은 불가능합니다 (내가 잘못하면 나를 고칠 수 있음). 따라서 실제 높이, 그것의 주위에 1 가지의 방법은 max-height를 대신 사용하기위한 것이다. 이 경우 max-height을 설정 한 값보다 큰 값으로 설정해야합니다.

이렇게 추가하면 찾고있는 것일 수 있습니다. 당신은뿐만 아니라 불투명도 속성을 전환하려는 경우 귀하의 경우에는

DEMO

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

, 당신은 단지 당신이 모든 속성을 전환하는 것을 의미하는 transition: max-height 1.0s;transition: all 1.0s;에 변경할 수 있습니다. http://www.w3.org/TR/css3-transitions/