jquery - 使用 CSS 显示/隐藏文本

Question

我希望能够在页面上显示全文，但只显示第一段，然后使用“阅读更多”按钮显示隐藏文本。我想只使用 CSS 而不是 jQuery 来做到这一点，但想不出最好的方法。有什么想法吗？

所以类似的东西:

<p class="lead">This is the intro text</p>
<p>Read more</p>
<p class="hide"> This is the rest of the text, which is hidden on page load</p>

然后 CSS 会完成剩下的工作，但我不知道该做什么!

Answer 1

对于“可逆”点击类型功能，这里是复选框替代方案。

CodePen Demo

HTML

<div>
  <p class="lead">This is the intro text</p>
  <label for="toggle-1">Read More</label>
  <input type="checkbox" id="toggle-1">
  <p class="hide"> This is the rest of the text, which is hidden on page load</p>
</div>

CSS(带有一些基本样式)

div {
  margin:10px;
  border:1px solid lightgrey;
  padding:10px;
}

.hide {
  display:none;
}

label {
  background:lightblue;
  padding:5px;
  border-radius:5px;
  box-shadow:2px 3px 4px grey;
  border:1px solid blue;
}

label:active {
  box-shadow:0px 1px 2px grey;
}

input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
  /* For mobile, it's typically better to position checkbox on top of clickable
  area and turn opacity to 0 instead. */
}

/* Toggled State */
input[type=checkbox]:checked ~ .hide {
   display:block;
}