CSS3摺疊和展開效果

我需要一點幫助。CSS3摺疊和展開效果

我在CodePen中使用以下html和css。基本上我需要它從摺疊狀態開始而不是打開。

我需要文件夾封面（頂部div）始終展開，因爲這將顯示有關如何打開內容的信息，因爲封面需要包含摺疊/展開鏈接。另外，當我將內容輸入到每個摺疊區域時，內容會運行到下一個區域，而不是展開當前區域，如您在下面編輯的CodePen中所看到的。

這也需要解決，以便它在摺疊時不會引起問題，因爲div變得不對齊。

原始CodePen

http://codepen.io/boxabrain/pen/Hhugb/

我的編輯CodePen

http://codepen.io/anon/pen/gmAnK

HTML

<div id="folder"> 
    <input type="checkbox" id="toggle"/> <label for="toggle" id="toggle- label">fold/unfold</label> 

    <div class="fold"> 
    Element 1 
    </div> 
    <div class="fold"> 
    Element 2 
    </div> 
    <div class="fold"> 
    Element 3 
    </div> 
    <div class="fold"> 
    Element 4 
    </div> 
    <div class="fold"> 
    Element 5 
    </div> 
    <div class="fold"> 
    Element 6 
    </div> 
    <div class="fold"> 
    Element 7 
    </div> 
    <div class="fold"> 
    Element 8 
    </div> 
</div>

CSS

body { 
padding: 50px; 
font-family: Arial, sans-serif; 
} 

#folder { 
width: 300px; 
padding: 10px; 
} 

.fold { 
background: #000; 
background: #000; 
padding: 10px; 
width: 280px; 
height: 80px; 
color: #999; 
-webkit-transition: all 0.3s linear; 
-moz-transition: all 0.3s linear; 
transition: all 0.3s linear; 
} 

#toggle { display: none; } 

#toggle-label { 
display: inline-block; 
cursor: pointer; 
margin-bottom: 50px; 
border: 1px solid #e5e5e5; 
font-size: 11px; 
color: #999; 
background: #fff; 
text-transform: uppercase; 
border-radius: 5px; 
padding: 5px; 
} 

#toggle:checked ~ .fold:nth-child(odd) { 
margin-top: -82px; 
-webkit-transform: perspective(800px) rotateX(-80deg); 
-moz-transform: perspective(800px) rotateX(-80deg); 
transform: perspective(800px) rotateX(-80deg); 
} 

#toggle:checked ~ .fold:nth-child(even) { 
margin-top: -84px; 
-webkit-transform: perspective(800px) rotateX(80deg); 
-moz-transform: perspective(800px) rotateX(80deg); 
transform: perspective(800px) rotateX(80deg); 
}

任何人都可以幫我嗎？

在此先感謝

來源

2014-09-28 JamesWdev

要在摺疊狀態下展開，取出，只需添加：不選擇器這樣的：

#toggle:not(:checked) ~ .fold:nth-child(odd) 
#toggle:not(:checked) ~ .fold:nth-child(even)

關於內容溢出 - 你需要通過手，如果你不進行調整想要使用Js（玩個人.folds 高度和rotateX）。

來源

2014-09-28 23:32:10 lakesare

CSS3摺疊和展開效果

回答

相關問題