Question

我需要一些帮助。

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

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

这也需要解决，以便在折叠时div不会导致问题，因为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 ），您需要手动调整。

CSS3折叠和展开效果

1 个答案: