css - 如何用纯CSS实现Read more/Read less

Question

我正在使用 http://codepen.io/Idered/pen/AeBgF 实现 CSS 多读/少读功能作为起点。

我修改它以解决 <p>标签与 <li>列出元素。

我无法让代码在我的页面上运行 http://bit.ly/1L5vMm7

这是我的 CSS 版本:

input.read-more-state {
    display: none;
}

p.read-more-target {
    font-size: 0;
    max-height: 0;
    opacity: 0;
    transition: .25s ease;
}

input.read-more-state:checked ~ div.read-more-wrap p.read-more-target {
    font-size: inherit;
    max-height: 999em;
    opacity: 1;
}

input.read-more-state ~ label.read-more-trigger:before {
    content: 'Read more';
}

input.read-more-state:checked ~ label.read-more-trigger:before {
    content: 'Read less';
}

label.read-more-trigger {
    cursor: pointer;
    display: inline-block;
}

这是我的 HTML:

<input class="read-more-state" id="read-more-controller" type="checkbox">
<div class="read-more-wrap">
    <p>Lorem ipsum dolor sit amet...</p>
    <p class="read-more-target">Lorem ipsum dolor sit amet...</p>
    <p class="read-more-target">Lorem ipsum dolor sit amet...</p>
    <p class="read-more-target">Lorem ipsum dolor sit amet...</p>
</div>
<label class="read-more-trigger" for="read-more-controller"></label>

如果您能发现什么与 RM/RL 实用程序冲突，请告诉我。

Answer 1

CodePen 如何实现这种行为？

演示中的代码所做的只是修改 max-height wrapper div基于选中或未选中的复选框，同时更改 label 的内容.

现在让我们看一下 CSS 中有助于执行此操作的关键单个选择器:

.read-more-state:checked ~ .read-more-wrap .read-more-target

• 这个选择器意味着当 input与 class = 'read-more-state'被选中，选择带有 class = 'read-more-target' 的元素包装在 class = 'read-more-wrap' 下当包装器也是复选框(引用元素)的兄弟时。

.read-more-state ~ .read-more-trigger:before

• 这是填充 label 的默认文本的文本.它所做的是设置 content作为 ::before 的“显示更多” label 的元素与 class = 'read-more-trigger'当label也是复选框的兄弟。

.read-more-state:checked ~ .read-more-trigger:before

• 这是修改 label 文本的那个单击复选框时。选择器意味着当 input与 class = 'read-more-state'是:checked , 设置 content标签的前元素为 "Show less"。

另外，请注意 for label 中的属性标签。该字段的值指向id的 input标签，因此每当点击标签时，input元素的状态会自动切换。无论 label 在 DOM 中的哪个位置，这都会发生和 input元素是。

.read-more-state {
  display: none;
}
.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}
.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}
.read-more-state ~ .read-more-trigger:before {
  content: 'Show more';
}
.read-more-state:checked ~ .read-more-trigger:before {
  content: 'Show less';
}
.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  padding: 0 .5em;
  color: #666;
  font-size: .9em;
  line-height: 2;
  border: 1px solid #ddd;
  border-radius: .25em;
}
/* Other style */

body {
  padding: 2%;
}
p {
  padding: 2%;
  background: #fff9c6;
  color: #c7b27e;
  border: 1px solid #fce29f;
  border-radius: .25em;
}

<div>
  <input type="checkbox" class="read-more-state" id="post-1" />

  <p class="read-more-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <span class="read-more-target">Libero fuga facilis vel consectetur quos sapiente deleniti eveniet dolores tempore eos deserunt officia quis ab? Excepturi vero tempore minus beatae voluptatem!</span>
  </p>

  <label for="post-1" class="read-more-trigger"></label>
</div>

<div>
  <input type="checkbox" class="read-more-state" id="post-2" />

  <ul class="read-more-wrap">
    <li>lorem</li>
    <li>lorem 2</li>
    <li class="read-more-target">lorem 3</li>
    <li class="read-more-target">lorem 4</li>
  </ul>

  <label for="post-2" class="read-more-trigger"></label>
</div>

---

为什么我的代码不起作用？

CSS 选择器只能选择出现在 DOM 中引用元素之后/下方的同级元素。在您的代码段中，div input 之后需要选择哪个(它是引用元素，其状态会触发操作)因此 CSS 无法选择它。没有选择导致没有应用属性更改。

input.read-more-state {
  display: none;
}
p.read-more-target {
  font-size: 0;
  max-height: 0;
  opacity: 0;
  transition: .25s ease;
}
input.read-more-state:checked ~ div.read-more-wrap p.read-more-target {
  font-size: inherit;
  max-height: 999em;
  opacity: 1;
}
input.read-more-state ~ label.read-more-trigger:before {
  content: 'Read more';
}
input.read-more-state:checked ~ label.read-more-trigger:before {
  content: 'Read less';
}
label.read-more-trigger {
  cursor: pointer;
  display: inline-block;
}

<div class="read-more-wrap">
  <p>Lorem ipsum dolor sit amet...</p>
  <p class="read-more-target">Lorem ipsum dolor sit amet...</p>
  <p class="read-more-target">Lorem ipsum dolor sit amet...</p>
  <p class="read-more-target">Lorem ipsum dolor sit amet...</p>
</div>
<input class="read-more-state" id="read-more-controller" type="checkbox">
<label class="read-more-trigger" for="read-more-controller"></label>

---

我该如何解决这个问题？

只需移动 input标签位于包装器上方 div标记其 max-height单击标签时需要更改。这样做意味着引用元素现在位于需要选择和设置样式的元素之上。因此，CSS 将能够应用 max-height正确地揭示隐藏的内容。

input.read-more-state {
  display: none;
}
p.read-more-target {
  font-size: 0;
  max-height: 0;
  opacity: 0;
  transition: .25s ease;
}
input.read-more-state:checked ~ div.read-more-wrap p.read-more-target {
  font-size: inherit;
  max-height: 999em;
  opacity: 1;
}
input.read-more-state ~ label.read-more-trigger:before {
  content: 'Read more';
}
input.read-more-state:checked ~ label.read-more-trigger:before {
  content: 'Read less';
}
label.read-more-trigger {
  cursor: pointer;
  display: inline-block;
}

<input class="read-more-state" id="read-more-controller" type="checkbox">
<div class="read-more-wrap">
  <p>Lorem ipsum dolor sit amet...</p>
  <p class="read-more-target">Lorem ipsum dolor sit amet...</p>
  <p class="read-more-target">Lorem ipsum dolor sit amet...</p>
  <p class="read-more-target">Lorem ipsum dolor sit amet...</p>
</div>
<label class="read-more-trigger" for="read-more-controller"></label>