如何仅使用 CSS 按需显示和隐藏元素？

使用 CSS 按需显示和隐藏元素

无论浏览器设置或设备限制如何，浏览 Web 内容都应该是一种轻松的体验。在 JavaScript 不可用的情况下，确保可访问性至关重要。

考虑一个带有菜单和多个隐藏 div 的场景。用户的选择应该触发特定 div 的出现。虽然 JavaScript 提供了理想的解决方案，但在禁用时它会停止运行。

CSS 来救援

为了克服这一挑战，CSS 来帮助我们。 “checkbox hack”利用了复选框和多功能 :checked 伪选择器的强大功能。

工作原理

最初，创建一个复选框和多个 div。该复选框分配了三种样式：

1. 隐藏：复选框在视觉上隐藏，显示：无。
2. 未选中：关联的 div 保持隐藏并显示：无。
3. 选定：与选中的复选框关联的div以display：inline-block显示。

实现

在 HTML 中，创建复选框元素和相应的标签元素，每个标签与唯一的关联div.

<input type="checkbox">

在 CSS 中，定义复选框和标签的样式：

/* Hide checkbox visually */
input[type="checkbox"] {
  display: none;
}

/* Use label for checkbox to provide visual accessibility */
label {
  display: inline-block;
  cursor: pointer;
}

/* Hide divs initially */
div {
  display: none;
}

/* Show div when associated checkbox is checked */
input[type="checkbox"]:checked ~ div {
  display: inline-block;
}

结论

使用此 CSS-基于解决方案，即使禁用了 JavaScript，div 也可以在单击时无缝显示或隐藏，从而确保普遍可访问的用户体验。

以上是如何仅使用 CSS 按需显示和隐藏元素？的详细内容。更多信息请关注PHP中文网其他相关文章！