CSS 3 Horizontal Accordion

Question

jQuery가 평범한 아코디언 기능을 제공하는 방식과 같이 간단한 아코디언을 제공하는지 궁금합니다. 웹 검색 후 사용할 수있는 플러그인이 있습니다. CSS 3으로 완전히 기능하는 가로 아코디언으로 바뀌 었습니다. 그 데모는 here입니다. 아직 CSS 3에 익숙하지 않아서 어떻게 작동하는지 아직 확실하지 않습니다. 나는 그것을 가장 좋아하는 부분에 맞게 스타일링 할 수있었습니다. 그러나 슬라이드 효과에 관한 한, 탭이 닫혀있을 때 내부의 콘텐츠가 계속 보이는 것 같습니다.

.accordion>ul>li>div 

내 문제의 작동 예제를 찾을 수 있습니다. 나는 방화범을 사용하여 무슨 일이 벌어지고 있는지 이해하려고 노력했으며 z-index와 관련이 있다고 생각했습니다. 그러나 그것은 저에게 많은 것을하지 않았습니다.

감사합니다,

랜스

Answer 1

당신은 .accordion>ul>li>div에 배경색을 설정해야합니다. 현재 투명하고 따라서 아래의 모든 것이 "빛나게"됩니다.

Answer 2

난 당신이 "통계"내부 사이트의 중간에있는 탭을 참조 생각 : "게임 당 파운드", 등 ...

I가 시도했습니다, "게임 당 리바운드" CSS를 수정하고 다음 속성을 추가하면 작동한다고 생각합니다.

.accordion > ul > li {position:relative;}<br/> 
.accordion > ul > li div {position:relative;background-color:#fff;}