修改折叠/展开效果的高度

Question

我正在使用以下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);
};

Answer 1

折叠完成后，您需要降低折叠物品的高度：

相关的选择器就是这两个 - 将高度调整到你想要的值 - 我使用了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);
}

检查下面的代码段

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;