纯HTML/CSS实现点击链接显示/隐藏Div的代码问题排查

• 选择器逻辑完全错误：:target 只会匹配URL hash直接对应的元素，原有写法#one.show:target要求元素同时满足id为one、class包含show、是当前锚点目标三个条件，但实际id为one的是内容div，class为displayable-text，根本没有show类，对应CSS规则从一开始就匹配不到任何元素。
• 兄弟选择器使用错误：通用兄弟选择器~仅能选中同一父元素下、位于参考元素后方的同级节点，原有代码中隐藏链接写在内容div内部，和内容div不是同级关系；显示链接位于内容div前方，均不满足~的匹配要求。
• 锚点逻辑冲突：显示、隐藏按钮都指向同一个id的锚点，点击隐藏按钮时URL hash不会发生变化，根本无法触发样式切换实现隐藏效果。

以下实现完全不依赖JavaScript/jQuery，完全匹配需求：外部点击文本展开内容区块，区块底部单独的点击文本触发隐藏，支持任意多个模块从上到下排列，新增模块无需额外编写CSS规则。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
/* 模块容器，控制模块纵向排列与间距 */
.module-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}
/* 隐藏锚点元素，不占用布局空间 */
.target-anchor {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
/* 可点击文本通用样式 */
.show-btn, .hide-btn {
  color: #1677ff;
  text-decoration: underline;
  cursor: pointer;
  margin: 0 4px;
}
.hide-btn {
  color: #ff4d4f;
}
/* 内容块默认隐藏 */
.content-block {
  display: none;
  margin-top: 8px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #f9fafb;
}
/* 锚点命中时，显示对应模块的内容块 */
.target-anchor:target ~ .content-block {
  display: block;
}
</style>
</head>
<body>
<!-- 顶部空锚点，作为全局隐藏状态的目标 -->
<span id="close" class="target-anchor"></span>

<div class="module-container">
  <!-- 第一个模块 -->
  <div class="toggle-module">
    <span id="m1" class="target-anchor"></span>
    <p>这是第一个模块的前置说明文本 <a href="#m1" class="show-btn">点击查看完整内容</a></p>
    <div class="content-block">
      <p>这里是第一个模块的完整内容区域，内部可放置任意文本、图片、表单等元素，不影响折叠展开功能。</p>
      <p>多行内容、复杂排版均可正常展示。</p>
      <a href="#close" class="hide-btn">点击隐藏此区块</a>
    </div>
  </div>

  <!-- 第二个模块 -->
  <div class="toggle-module">
    <span id="m2" class="target-anchor"></span>
    <p>这是第二个模块的前置说明文本 <a href="#m2" class="show-btn">点击查看完整内容</a></p>
    <div class="content-block">
      <p>第二个模块与第一个模块逻辑独立，按相同结构复制即可新增模块，仅需给锚点设置不重复的id，无需修改CSS。</p>
      <a href="#close" class="hide-btn">点击隐藏此区块</a>
    </div>
  </div>
  <!-- 可按上述格式继续新增第三个、第四个模块 -->
</div>
</body>
</html>

• 每个模块前放置一个不可见的空锚点元素，展开按钮的href指向对应锚点的id，点击后URL hash更新，触发:target伪类匹配，通过通用兄弟选择器~选中后方的内容块设置为显示状态。
• 所有隐藏按钮的href统一指向页面顶部的空锚点#close，点击后所有模块的锚点都不再被命中，内容块自动回到默认隐藏状态。

如果需要支持多个模块同时保持展开，可改用checkbox hack实现：将隐藏的checkbox放在每个模块最前方，展开、隐藏按钮用<label>绑定对应checkbox的id，通过:checked伪类控制内容块显示隐藏即可，同样不需要JavaScript。

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