主页 / 问题 / 1287896
Accepted
Monkey Mutant
Asked:2022-05-30 19:50:13 +0000 UTC2022-05-30 19:50:13 +0000 UTC

隐藏后如何显示文本？

  • 772

如何显示隐藏的文字？

我裁剪了文本并在末尾添加了三个点，之后我插入了一个带文本的跨度，Показать весь当您单击该跨度时，应该会出现整个文本

但我得到了一些废话......

document.querySelectorAll(".item p").forEach(function(el) {
  el.innerHTML = el.innerHTML
    .split("", 240)
    .join("")
    .toLowerCase()
    .padEnd(243, ".");
  el.insertAdjacentHTML("beforeend", "<span>Показать весь</span>");
});

document.querySelector(".item p span").addEventListener("click", function() {
  let txt = this.closest(".description").innerHTML;
  let par = this.closest(".description");


})
img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item {
  width: 380px;
}

p span {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

p span:hover {
  color: darkblue;
}
<div class="item">
  <p class="description">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus molestias harum repellat ea dolorum repudiandae iste dolor quam hic voluptate modi saepe perferendis iusto adipisci nisi earum excepturi quasi ullam odit ad, ipsam dolore eius molestiae
    est. Optio, ipsa porro. Cupiditate possimus saepe, explicabo veniam unde neque eos molestiae iusto sit hic amet distinctio ducimus quod, non quae assumenda dolorem officia. Error facere ipsum nemo voluptatem? Tempore distinctio excepturi eum, itaque
    sunt labore. Assumenda repellendus, iste magni saepe rem ea in perspiciatis expedita, necessitatibus commodi tenetur odio maxime. Temporibus earum, quaerat rerum qui corporis quo officiis quidem ratione et velit? Lorem ipsum dolor sit amet consectetur
    adipisicing elit. Dicta, quae molestiae. Iste minus veritatis earum omnis nam! Est asperiores distinctio dolore sint maxime ducimus rerum porro placeat ea, atque cum officiis alias architecto enim quas consequuntur non ut recusandae cupiditate. Numquam
    esse fugit illum eveniet ab deleniti iusto debitis eligendi alias quia a, necessitatibus itaque fugiat sunt eum. Corrupti eveniet ducimus voluptates tempora rerum ratione aliquid unde blanditiis distinctio cum ipsum recusandae placeat aut, consectetur
    temporibus modi exercitationem vero, repellendus perspiciatis adipisci reprehenderit officiis cupiditate explicabo. Saepe, et omnis obcaecati labore laboriosam voluptatem rerum cum eveniet iusto accusantium laborum facere?
  </p>
</div>

javascript

1 个回答

  1. Best Answer

    let isHidden = true;
const desc = document.querySelector('.item .description');
const text = desc.innerHTML;

computeState();

function computeState() {
  if (isHidden) {
    desc.innerHTML = text.split("", 240)
      .join("")
      .toLowerCase()
      .padEnd(243, ".") + '<span>Показать весь</span>';
  } else {
    desc.innerHTML = text + '<span>Показать меньше</span>';
  }

  document.querySelector("span").addEventListener("click", () => {
    isHidden = !isHidden;
    computeState();
  });
}
    .item {
  width: 380px;
}

p span {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

p span:hover {
  color: darkblue;
}
    <div class="item">
  <p class="description">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus molestias harum repellat ea dolorum repudiandae iste dolor quam hic voluptate modi saepe perferendis iusto adipisci nisi earum excepturi quasi ullam odit ad, ipsam dolore eius molestiae
    est. Optio, ipsa porro. Cupiditate possimus saepe, explicabo veniam unde neque eos molestiae iusto sit hic amet distinctio ducimus quod, non quae assumenda dolorem officia. Error facere ipsum nemo voluptatem? Tempore distinctio excepturi eum, itaque
    sunt labore. Assumenda repellendus, iste magni saepe rem ea in perspiciatis expedita, necessitatibus commodi tenetur odio maxime. Temporibus earum, quaerat rerum qui corporis quo officiis quidem ratione et velit? Lorem ipsum dolor sit amet consectetur
    adipisicing elit. Dicta, quae molestiae. Iste minus veritatis earum omnis nam! Est asperiores distinctio dolore sint maxime ducimus rerum porro placeat ea, atque cum officiis alias architecto enim quas consequuntur non ut recusandae cupiditate. Numquam
    esse fugit illum eveniet ab deleniti iusto debitis eligendi alias quia a, necessitatibus itaque fugiat sunt eum. Corrupti eveniet ducimus voluptates tempora rerum ratione aliquid unde blanditiis distinctio cum ipsum recusandae placeat aut, consectetur
    temporibus modi exercitationem vero, repellendus perspiciatis adipisci reprehenderit officiis cupiditate explicabo. Saepe, et omnis obcaecati labore laboriosam voluptatem rerum cum eveniet iusto accusantium laborum facere?
  </p>
</div>

    • 1

相关问题