用純CSS實施'顯示更多/更少”功能

>現代網絡開發通常利用CSS創建動態元素，例如滑塊，模態和工具提示，從而最大程度地減少JavaScript Reliance。本文展示了實現“顯示更多/更少”功能的純CSS方法，甚至創建了功能性手風琴風格的示例。 我們將探索技術，潛在問題和解決方案。 此處省略了可訪問性注意事項，但是未來改進的關鍵方面。

密鑰概念：

此CSS僅“顯示更多/不顯示”依賴於“ Checkbox Hack”和同胞選擇器。 HTML結構使用無序列表；最後一項包含隱藏的複選框及其標籤。嵌套的無序列表保留要顯示/隱藏的內容。

>和max-heightcss屬性控制光滑的揭示/隱藏。 可能存在瀏覽器不一致；例如，光標行為在瀏覽器中可能有所不同。 transition

基本CSS知識： 理解以下內容至關重要：

一般的同級選擇器（
• ）：選擇所有兄弟姐妹遵循指定元素。 > ~
相鄰的同胞選擇器（
• ）：選擇立即在同胞之後。 > >
>複選框hack
• ：使用複選框的檢查狀態觸發CSS更改。
codepen演示（輸入中未提供的鏈接）提供了這些技術的交互式示例。

>

html結構：

基本的HTML結構是（從原來簡化）：

造型複選框容器：

<code class="language-html"><ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li class="container">
    <input type="checkbox" id="showHide">
    <label for="showHide"></label>
    <ul>
      <li>Hidden Item 1</li>
      <li>Hidden Item 2</li>
    </ul>
  </li>
</ul></code>

>

樣式位置標籤並隱藏複選框：>

使用偽元素（

> and.container）來處理標籤的內容（“更多”或“更少”）和動畫。

<code class="language-css">.container {
  position: relative;
  height: auto;
}

[type="checkbox"] {
  position: absolute;
  left: -9999px;
}

label {
  background: #e4e3df;
  display: block;
  width: 100%;
  height: 50px;
  cursor: pointer;
  position: absolute;
  top: 0;
}</code>

最初隱藏嵌套的 ：

與CSS：::before::after

：

<code class="language-css">label:before,
label:after {
  position: absolute;
}

/* ... (styles for :before and :after based on checked state) ... */</code>

<ul></ul>複選框的檢查狀態顯示隱藏的內容：

<code class="language-css">[type="checkbox"] ~ ul {
  display: none;
}</code>

選中標籤的位置和內容：> onclick codepen演示（鏈接省略）展示此基本切換效果。 >

添加平滑的過渡：

<code class="language-css">[type="checkbox"]:checked ~ ul {
  display: block;
}</code>

對於平滑的過渡，使用

>和

<code class="language-css">[type="checkbox"]:checked + label {
  top: 100%;
}

/* ... (styles for :before and :after when checked) ... */</code>

：

>

標籤的過渡也已更新：

codepen演示（省略鏈接）演示了改進的，更順暢的過渡。

max-height transition瀏覽器注意事項：

<code class="language-css">[type="checkbox"] ~ ul {
  overflow: hidden;
  max-height: 0;
  transition: max-height .45s cubic-bezier(.44,.99,.48,1);
}

[type="checkbox"]:checked ~ ul {
  max-height: 300px; /* Or a calculated height */
}</code>

請注意，光標行為在瀏覽器之間可能不一致（尤其是與過渡）。

結論：

<code class="language-css">label {
  transition: top .45s cubic-bezier(.44,.99,.48,1);
}</code>

>本文展示了一種功能強大的僅使用CSS的方法，用於“顯示更多/不顯示”功能。 儘管存在局限性（主要是瀏覽器不一致，並且需要預定的max-height），但該技術為許多情況提供了乾淨的，無JavaScript的解決方案。 請記住，在構建交互式組件時始終優先考慮可訪問性。

>

以上是用純CSS實施'顯示更多/更少”功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！