僅CSS的手風琴間隙

Question

我為我們的條款和條件使用僅適用於CSS的簡單手風琴來隱藏和顯示帶有復選框和transform屬性的子句。 但是，更新此信息時，項目符號點之間突然之間會出現較大的不一致的間隙。 它出現在下拉內容的長度超過三段且每個間隙的高度不同的情況下。

僅使用CSS並使用最少的代碼即可解決此問題的最佳解決方案是什么？

*絕對不能使用jQuery，Javascript或其他外部庫。 完整的代碼可以在這里找到： codepen.io/makecodenotwar/pen/dmXpjJ

樣本：一個要點的HTML結構（codepen上的完整代碼）：

<ul>
  <li>
    <input type="checkbox" checked>
    <i></i>
    <h5><span>►</span>Payment Clause</h5>
    <p>Blah, blah, blah...</p>
  </li>
</ul>

樣本CSS

p {
  position: relative;
  overflow: hidden;
  opacity: 1;
  transform: translate(0, 0);
  z-index: 2;
}

ul li {
  position: relative;
  overflow: hidden;
}
ul li i {
  position: absolute;
  transform: translate(-6px, 0);
}
ul li i:before, ul li i:after {
  content: "";
  position: absolute;
  width: 3px;
  height: 9px;
}
ul li i:before {
  transform: translate(-2px, 0) rotate(45deg);
}
ul li i:after {
  transform: translate(2px, 0) rotate(-45deg);
}
ul li input[type=checkbox] {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
}
ul li input[type=checkbox]:checked ~ p {
  max-height: 0;
  opacity: 0;
  transform: translate(0, 50%);
}
ul li input[type=checkbox]:checked ~ i:before {
  transform: translate(2px, 0) rotate(45deg);
}
ul li input[type=checkbox]:checked ~ i:after {
  transform: translate(-2px, 0) rotate(-45deg);
}

@keyframes flipdown {
  0% {
    opacity: 0;
    transform-origin: top center;
    transform: rotateX(-90deg);
  }
  5% {
    opacity: 1;
  }
  80% {
    transform: rotateX(8deg);
  }
  83% {
    transform: rotateX(6deg);
  }
  92% {
    transform: rotateX(-3deg);
  }
  100% {
    transform-origin: top center;
    transform: rotateX(0deg);
  }
}

Answer 1

隱藏手風琴物品

您的物品不可見，但仍在那兒。

嘗試將其添加到您的代碼中：

ul li input[type=checkbox]:checked ~ p {
     display: none;
}

Answer 2

自從我處理HTML或CSS以來已經很長時間了，但是您是否已經看到了這個示例 ？ 請原諒我。