用纯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中文网其他相关文章！