如何使用纯 CSS 创建可折叠内容列表：当您单击页面上的任意位置时，如何防止内容隐藏？

用 CSS 无缝隐藏和显示内容

为了用纯 CSS 实现可折叠的内容列表，我们遇到了一个挑战：只需单击页面上的任意位置即可隐藏内容页。这偏离了仅在单击“隐藏”链接时隐藏内容的预期行为。

CSS 解决方案

解决方案在于利用 :focus 和 ~ 选择器。修改后的 CSS 代码：

<code class="css">body {
  display: block;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}
.alert {
  display: none;
}</code>

HTML 标记

<code class="html"><span class="span3">Hide Me</span>
<span class="span2">Show Me</span>
<p class="alert">Some alarming information here</p></code>

了解解决方案

1. 焦点状态： :focus选择器定位已获得焦点的元素（例如，单击时）。
2. 同级选择器 (~)： ~ 选择器匹配作为所选元素的同级元素的元素。
3. 条件显示： CSS 规则根据 .span3 和 .span2 元素的焦点状态设置 .alert 元素的显示属性。

当“隐藏我”链接 (.span3) 获得焦点，其同级元素 .alert 元素变为隐藏。相反，当“Show Me”链接 (.span2) 获得焦点时，其同级元素 .alert 元素变得可见。这可确保仅当单击相应的链接时才按预期隐藏或显示内容。

以上是如何使用纯 CSS 创建可折叠内容列表：当您单击页面上的任意位置时，如何防止内容隐藏？的详细内容。更多信息请关注PHP中文网其他相关文章！