按下图标展开更多文字

Question

我有一个大文本，当我按下图标（向下）时，它会部署，但是如何使用另一个图标（向上）来将其汇总？

.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-state:checked~.read-more-trigger:before {
  background: url(up.svg);
}

.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;
}

<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"><img src="down.svg"></label>
</div>

但是另一个问题是，请以正确的方式显示我，我需要在计算机屏幕上查看所有文本，但是在响应版本中，需要隐藏一些文本，并在按下后进行显示。svg文本需要部署。

Answer 1

img和.read-more-trigger仅用于样式设置，因为jpg大。 您可以rotate元素（图片/ svg）。过渡后更加平滑。

.read-more-state:checked~.read-more-trigger>img

别忘了过渡到默认值 .read-more-trigger>img

img {
  height: 100%;
}

.read-more-trigger {
  height: 20px;
}

.read-more-state:checked~.read-more-trigger>img {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  transition: transform 0.65s ease-in-out;
}

.read-more-trigger>img {
  transition: transform 0.65s ease-in-out;
}

.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-state:checked~.read-more-trigger:before {
  background: url(up.svg);
}

.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;
}

<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"><img src="https://i.stack.imgur.com/IVbiS.jpg"></label>
</div>

P.S。您的“向下”箭头实际上是“向上”箭头。但这没关系。