我将以下CodePen用于折叠/展开效果CodePen:
折叠高度有问题。理想情况下,我需要每个折叠具有不同的高度,但是在折叠状态下,您会在每个折叠之间看到一个较大的白色空间,该空白不应该存在,并且我在解决问题时遇到了麻烦。
我赞赏使用javascript来控制高度可能会更好,但是我再次尝试并失败了。有没有人可以帮助我修复此代码并使之可行。
这是当前的html和CSS:
<div id="folder">
<input type="checkbox" id="toggle"/> <label for="toggle" id="toggle-label">fold/unfold</label>
<div class="fold">
This is a list of the fold<br>
One<br>
Two<br>
Three<br>
Four<br>
Five<br>
Six<br>
Seven<br>
Eight
</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>
的CSS
body {
padding: 50px;
font-family: Arial, sans-serif;
};
#folder {
width: 60%;
padding: 10px;
margin: 0 auto;
}
.fold {
background: -webkit-linear-gradient(top, #e5e5e5, #ccc);
background: -moz-linera-gradient(top, #e5e5e5, #ccc);
padding: 10px;
width: 100%;
height: 300px;
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:not(: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:not(: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);
};
折叠完成后,您需要降低折叠物品的高度:
相关的选择器有两个-将高度调整为您想要的值-我使用了100px:
#toggle:not(:checked) ~ .fold:nth-child(odd) {
margin-top: -82px;
height:100px; /* added height when folded */
-webkit-transform: perspective(800px) rotateX(-80deg);
-moz-transform: perspective(800px) rotateX(-80deg);
transform: perspective(800px) rotateX(-80deg);
}
#toggle:not(:checked) ~ .fold:nth-child(even) {
margin-top: -84px;
height:100px; /* added height when folded */
-webkit-transform: perspective(800px) rotateX(80deg);
-moz-transform: perspective(800px) rotateX(80deg);
transform: perspective(800px) rotateX(80deg);
}
检查下面的代码段
body {
padding: 50px;
font-family: Arial, sans-serif;
}
#folder {
width: 60%;
padding: 10px;
margin: 0 auto;
}
.fold {
background: -webkit-linear-gradient(top, #e5e5e5, #ccc);
background: -moz-linera-gradient(top, #e5e5e5, #ccc);
padding: 10px;
width: 100%;
height: 300px;
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:not(:checked) ~ .fold:nth-child(odd) {
margin-top: -82px;
height:100px;
-webkit-transform: perspective(800px) rotateX(-80deg);
-moz-transform: perspective(800px) rotateX(-80deg);
transform: perspective(800px) rotateX(-80deg);
}
#toggle:not(:checked) ~ .fold:nth-child(even) {
margin-top: -84px;
height:100px;
-webkit-transform: perspective(800px) rotateX(80deg);
-moz-transform: perspective(800px) rotateX(80deg);
transform: perspective(800px) rotateX(80deg);
}
<div id="folder">
<input type="checkbox" id="toggle"/> <label for="toggle" id="toggle-label">fold/unfold</label>
<div class="fold">
This is a list of the fold<br>
One<br>
Two<br>
Three<br>
Four<br>
Five<br>
Six<br>
Seven<br>
Eight
</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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句