为了用纯 CSS 实现可折叠的内容列表,我们遇到了一个挑战:只需单击页面上的任意位置即可隐藏内容页。这偏离了仅在单击“隐藏”链接时隐藏内容的预期行为。
解决方案在于利用 :focus 和 ~ 选择器。修改后的 CSS 代码:
<code class="css">body { display: block; } .span3:focus ~ .alert { display: none; } .span2:focus ~ .alert { display: block; } .alert { display: none; }</code>
<code class="html"><span class="span3">Hide Me</span> <span class="span2">Show Me</span> <p class="alert">Some alarming information here</p></code>
当“隐藏我”链接 (.span3) 获得焦点,其同级元素 .alert 元素变为隐藏。相反,当“Show Me”链接 (.span2) 获得焦点时,其同级元素 .alert 元素变得可见。这可确保仅当单击相应的链接时才按预期隐藏或显示内容。
以上是如何使用纯 CSS 创建可折叠内容列表:当您单击页面上的任意位置时,如何防止内容隐藏?的详细内容。更多信息请关注PHP中文网其他相关文章!