CSS를 사용하여 항목을 클릭 할 때 iPhone 스타일을 만들 때

Question

가능한 경우 JavaScript가 거의없는 CSS를 사용하여 HTML로 iPhone 스타일 폴더를 만들려고합니다. 여기에서 스크린 샷을 찾을 수 있습니다. http://getandroidstuff.com/simi-folder-android-widget-download-iphone-style-folder/ 해당 페이지의 스크린 샷에는 System, Apps, Toolbox 및 Dev의 4 개의 폴더가 표시됩니다. 앱을 클릭하면 앱이있는 슬라이드 아웃 메뉴가 표시됩니다. 많은 폴더에서 동일한 결과를 얻을 수 있습니까? 예를 들어, 4 개의 행이 합쳐져 총 3 개의 행을 갖도록 10 개의 div가 왼쪽으로 떠있었습니다. 사용자가 두 번째 div를 클릭하면 두 번째 및 세 번째 행이 아래로 밀어 내면서 총 4 개의 행이 만들어집니다.

일부 코드는 다음과 같이 연주하고 있습니다 : http://jsfiddle.net/uAtak/.

Answer 1

예, 가능합니다. 언급 한 예제와 달리 display : none과 : : 사용자가 아이콘을 클릭 할 때 애니메이션이있는 블록 사이를 토글합니다. 다른 아이콘이 자동으로 푸시됩니다.

Answer 2

이런 뜻이야? http://jsfiddle.net/uAtak/5/ div 'One'을 클릭하는 것만이 예제에서 작동하지만 보시다시피 연장하기가 쉽습니다.