如何实现无需Read Less的两次Read More分段展开功能？

开发者阿泽

2026-8-13

实现多段分步展开的Read More效果

你当前的问题是只用了单个复选框，导致所有隐藏内容会一次性显示。要实现两次点击分步展开的效果，可以通过多个复选框配合CSS相邻兄弟选择器，控制每段内容和对应按钮的显示时机，全程无需JavaScript。

修改后的代码：

CSS 部分

.bio {
  font-family: monospace;
}

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

/* 第一个复选框选中后，显示第一段内容和第二个按钮 */
#expand-1:checked ~ .more-1 {
  display: block;
}
#expand-1:checked ~ .expand-btn-2 {
  display: inline;
}

/* 第二个复选框选中后，显示第二段内容 */
#expand-2:checked ~ .more-2 {
  display: block;
}

/* 默认隐藏所有展开内容和第二个按钮 */
.more-1, .more-2, .expand-btn-2 {
  display: none;
}

/* 按钮统一样式 */
.expand-btn {
  color: rgb(0, 0, 0);
  cursor: pointer;
  font-weight: bold;
  text-decoration: underline;
}

HTML 部分

<div class="bio">
  <p>craftsman</p> <!-- 初始显示内容 -->
  
  <input type="checkbox" id="expand-1" class="expand-checkbox">
  <div class="more-1">
    <p>since birth has always had a love/hate relationship</p> <!-- 第一次展开内容 -->
  </div>
  <label for="expand-1" class="expand-btn expand-btn-1">Read More</label>
  
  <input type="checkbox" id="expand-2" class="expand-checkbox">
  <div class="more-2">
    <p>She had half-survived blahblahblah.</p> <!-- 第二次展开内容 -->
  </div>
  <label for="expand-2" class="expand-btn expand-btn-2">Read More</label>
</div>