CSS3折叠和展开效果

Question

我需要一点帮助。

我在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); 
} 

任何人都可以帮我吗？

在此先感谢

Answer 1

要在折叠状态下展开，取出，只需添加：不选择器这样的：

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

关于内容溢出 - 你需要通过手，如果你不进行调整想要使用Js（玩个人.folds 高度和rotateX）。