码农教程 - 一技在手,衣食无忧! tools

目录

如何 - 阅读更多阅读更少按钮

❮ 上一节 下一节 ❯

了解如何使用 JavaScript 创建"read more - read less" 按钮。

示例文本

Lorem ipsum dolor sat amet，consectetur adipiscing elit。菜豆，nulla et dictum interdum，nisi lorem egestas vitae scel...erisque enim ligula venenatis dolor。 Maecenas nisl est、ultrices nec congue eget、auctor vitae Massa。 Fusce luctus 前庭augue ut aliquet。 Nunc sagittis dictum nisi，sed ullamcorper ipsum dignissim ac。在自由人 sed nunc venenatis imperdiet sed ornare turpis。 Donec vitae dui eget Tellus gravida venenatis。整数 fringilla congue eros 非发酵。 Sed dapibus pulvinar nibh tempor porta。

阅读更多阅读更少按钮

步骤1）添加HTML：

示例

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>

<button onclick="myFunction()" id="myBtn">Read more</button>
步骤2）添加CSS：

示例

#more {display: none;}
步骤 3) 添加 JavaScript：

示例

function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less";
    moreText.style.display = "inline";
  }
}
亲自试一试 »

❮ 上一节 下一节 ❯