求助：点击Div内部内容时保持内容显示的CSS代码修复

嘿，我懂你现在遇到的麻烦——用纯CSS做的显示/隐藏功能，点已经展开的内容区域居然会意外收起，对吧？这问题我之前也碰到过，根源在于你原来的CSS依赖触发按钮的:focus状态来控制内容显示，但当你点击.alert内容时，之前获得焦点的.span2会失去焦点，导致兄弟选择器的规则失效，内容就变回隐藏了。下面给你两个纯CSS的修复方案：

方案一：利用:focus-within（现代浏览器推荐） #

这个方案用CSS的:focus-within伪类，只要容器内的任何元素（包括内容区域）获得焦点，容器就会保持激活状态，从而让内容持续显示。我们需要把触发按钮和内容放到同一个容器里：

修改后的HTML #

<div class="alert-container" tabindex="0">
  <span class="span2" tabindex="0">Show Me</span>
  <span class="span3" tabindex="0">Hide Me</span>
  <p class="alert">Some alarming information here</p>
</div>

对应的CSS #

/* 默认隐藏内容 */
.alert {
  display: none;
}

/* 容器内任何元素获得焦点时，显示内容 */
.alert-container:focus-within .alert {
  display: block;
}

/* 点击Hide Me时隐藏内容 */
.span3:focus ~ .alert {
  display: none;
}

/* 可选：移除容器的默认聚焦边框，让界面更美观 */
.alert-container {
  outline: none;
}

原理说明：alert-container加上tabindex="0"后变成可聚焦元素，当你点击Show Me时，容器会通过:focus-within保持激活状态；即使你点击.alert内容，焦点会转移到内容上，但容器依然处于:focus-within状态，所以内容不会消失。点击Hide Me时，依然会触发隐藏规则。

方案二：Checkbox Hack（兼容旧浏览器） #

如果需要兼容不支持:focus-within的旧浏览器（比如IE），可以用隐藏的复选框来控制显示状态——复选框的选中状态不会因为点击内容区域而改变，能稳定保持内容显示：

修改后的HTML #

<input type="checkbox" id="alert-toggle" class="hidden-checkbox">
<label for="alert-toggle" class="toggle-btn show-btn">Show Me</label>
<label for="alert-toggle" class="toggle-btn hide-btn">Hide Me</label>
<p class="alert">Some alarming information here</p>

对应的CSS #

/* 隐藏复选框 */
.hidden-checkbox {
  display: none;
}

/* 默认隐藏内容和Hide按钮 */
.alert {
  display: none;
}
.hide-btn {
  display: none;
}

/* 复选框选中时：显示内容，切换按钮状态 */
.hidden-checkbox:checked ~ .alert {
  display: block;
}
.hidden-checkbox:checked ~ .show-btn {
  display: none;
}
.hidden-checkbox:checked ~ .hide-btn {
  display: inline-block;
}

原理说明：两个label都绑定到隐藏的复选框，点击Show Me会选中复选框，触发内容显示并切换按钮；点击Hide Me会取消选中，隐藏内容并切换按钮。因为内容区域和复选框状态无关，点击内容不会改变复选框的选中状态，所以内容会一直保持显示，直到你点击Hide Me。

内容的提问来源于stack exchange，提问作者tom