📌  相关文章
📜  jQuery jquery-read-more-read-less功能(1)

📅  最后修改于: 2023-12-03 15:16:41.889000             🧑  作者: Mango

jQuery read-more/read-less 功能

jQuery 是一个优秀的 JavaScript 库，通过它可以更加方便地操作 DOM、处理事件等。而 read-more/read-less 是一种常见的网页设计功能，它可以展示部分文章而不是全部内容，点击“阅读更多”按钮之后可以展示全部内容。本文将介绍如何使用 jQuery 实现 read-more/read-less 功能。

实现思路

实现 read-more/read-less 功能的关键在于，需要修改页面的 DOM 结构。我们可以先将文章的内容隐藏（通过 CSS 中的 display:none），然后在“阅读更多”按钮被点击时显示这些内容。而“收起”的功能同理。

具体实现会用到以下 jQuery 方法：

  • text()：获取或设置元素的文本内容。
  • click()：为元素添加点击事件监听器。
  • toggleClass()：切换元素的类名。
  • slideToggle()：切换元素的显示状态（通过设置元素高度的方式实现）。
代码实现

下面是一个简单的 HTML 文档，其中包含一篇文章和一个“阅读更多”按钮：

<div class="article">
  <h1>文章标题</h1>
  <p>这是一篇长文章，内容很多。</p>
  <p>...</p>
  <p>需要点击“阅读更多”按钮才能看到全部内容。</p>
  <p class="hidden">全部内容。</p>
  <button class="read-more">阅读更多</button>
</div>

其中，.hidden 类将使元素被隐藏。

在 jQuery 中，我们可以这样实现：

$(function() {
  $(".read-more").click(function() {
    $(".hidden").toggle(); // 显示/隐藏全部内容
    $(this).text(function(i, text) {
      // 切换按钮文本
      return text === "阅读更多" ? "收起" : "阅读更多";
    });
  });
});

在页面加载完成后（$(function() {})），为“阅读更多”按钮添加点击监听器，然后将所有 .hidden 元素进行显示/隐藏操作。最后，切换按钮的文本。

完整代码
<html>
  <head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
      .hidden {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="article">
      <h1>文章标题</h1>
      <p>这是一篇长文章，内容很多。</p>
      <p>...</p>
      <p>需要点击“阅读更多”按钮才能看到全部内容。</p>
      <p class="hidden">全部内容。</p>
      <button class="read-more">阅读更多</button>
    </div>
    <script>
      $(function() {
        $(".read-more").click(function() {
          $(".hidden").toggle();
          $(this).text(function(i, text) {
            return text === "阅读更多" ? "收起" : "阅读更多";
          });
        });
      });
    </script>
  </body>
</html>

以上是一个完整的实现了 read-more/read-less 功能的 HTML 文档。