html - CSS3 折叠展开效果

Question

我需要一点帮助。

我在 CodePen 中使用以下 html 和 css。基本上我需要它以折叠状态而不是打开状态开始。

我需要始终展开文件夹封面(顶部 div)，因为这将显示有关如何打开内容的信息，因为封面需要包含折叠/展开链接。此外，当我在每个折叠 div 中输入内容时，内容会运行到下一个 div，而不是扩展当前 div，正如您将在下面我编辑的 CodePen 中看到的那样。

这也需要解决，以便在折叠时不会因为 div 未对齐而导致问题。

原始代码笔

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

要以折叠状态开始，只需像这样添加 :not 选择器:

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

关于内容溢出 - 如果你不想使用 Js，你需要手动调整它(玩个别 .folds heights 和 rotateX)。