显示隐藏更多文本 jquery - Javascript (1)

📌 相关文章

📜 显示隐藏更多文本 jquery - Javascript (1)

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

显示隐藏更多文本

在线网站或应用程序中经常使用更多/收起箭头来显示或隐藏文本内容，以保持页面风格简洁。在本指南中，我们将学习如何使用jQuery和JavaScript在网页中实现此效果。

HTML模板

我们首先要准备一个HTML模板，其中包含要显示的文本内容和更多/收起箭头所需的CSS和JavaScript。下面是一个基本的HTML模板。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>显示隐藏更多文本</title>

    <style type="text/css">
      .morecontent span {
        display: none;
      }

      .show-more {
        display: block;
      }
    </style>

  </head>
  <body>

    <div class="morecontent">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a risus
        facilisis, fermentum ligula non, semper magna. Sed ac massa velit.
        Aliquam erat volutpat. In finibus metus ligula, ac pellentesque libero
        scelerisque id. Donec vel gravida velit, at volutpat mi. Sed auctor
        justo eu leo placerat bibendum. Nulla in est a eros ornare auctor at ut
        magna. Nam libero diam, efficitur et blandit ac, laoreet et sapien.
        Donec ullamcorper, ex ut auctor dapibus, enim sem blandit turpis, eu
        aliquam nibh nibh non augue. Mauris eu nulla velit. Suspendisse vel
        ante arcu. Nam eu auctor libero.
      </p>

      <span class="show-more">显示更多</span>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        var showChar = 100;
        var ellipsestext = "...";
        var moretext = "显示更多";
        var lesstext = "收起";

        $('.morecontent p').each(function() {
          var content = $(this).html();

          if (content.length > showChar) {
            var c = content.substr(0, showChar);
            var html = c + '<span class="moreellipses">' + ellipsestext + '</span>&nbsp;<span class="morecontent"><span>' + content.substr(showChar) + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

            $(this).html(html);
          }
        });

        $(".morelink").click(function(e) {
          e.preventDefault();

          var thisContent = $(this).parent('.morecontent');
          var content = thisContent.find('span').html();

          if ($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);

          } else {
            $(this).addClass("less");
            $(this).html(lesstext);
          }

          thisContent.find('span').html(content);
          thisContent.find('span .moreellipses').toggle();
        });
      });
    </script>
  </body>
</html>

CSS

我们使用CSS为要隐藏的文本添加样式，并将更多/收起箭头设置为默认隐藏。

.morecontent span {
  display: none;
}

.show-more {
  display: block;
}

JS代码

使用JavaScript和jQuery实现此效果。

$(document).ready(function() {
  var showChar = 100; // 要显示的字符数
  var ellipsestext = "..."; // 省略号文本
  var moretext = "Show more"; // '更多'文本
  var lesstext = "收起"; // '收起'文本

  $('.morecontent p').each(function() {
    var content = $(this).html();

    if (content.length > showChar) {
      var c = content.substr(0, showChar);
      var html = c + '<span class="moreellipses">' + ellipsestext + '</span>&nbsp;<span class="morecontent"><span>' + content.substr(showChar) + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

      $(this).html(html);
    }
  });

  $(".morelink").click(function(e) {
    e.preventDefault();

    var thisContent = $(this).parent('.morecontent');
    var content = thisContent.find('span').html();

    if ($(this).hasClass("less")) {
      $(this).removeClass("less");
      $(this).html(moretext);

    } else {
      $(this).addClass("less");
      $(this).html(lesstext);
    }

    thisContent.find('span').html(content);
    thisContent.find('span .moreellipses').toggle();
  });
});

总结

这个教程教会了我们如何使用jQuery和JavaScript在我们的网页中实现‘显示更多’/‘收起’的效果。我们为要隐藏的文本添加样式，并使用JavaScript自定义更多/收起箭头的文本和显示的字符数。最后，我们将更多/收起箭头设置为默认隐藏，并在单击时将它们切换为显示/隐藏来实现这个效果。