首页  >  文章  >  web前端  >  如何使用纯 CSS 创建可折叠内容列表:当您单击页面上的任意位置时,如何防止内容隐藏?

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

DDD
DDD原创
2024-11-01 18:01:30224浏览

How to Create a Collapsible Content List with Pure CSS: How do you prevent content from hiding when you click anywhere on the page?

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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn