jquery文字隐藏点击更多显示

随着互联网技术的发展，网站的用户体验越来越受到重视。在网站设计中，如何更好地展示内容，提高用户的阅读体验成为了重要的话题。

针对较长的页面内容，为了避免页面过长，我们通常会使用文字折叠或点击更多的方式，让用户可以自主选择是否展开全文。在Web开发中，jQuery是一个广泛使用的工具库之一，下面我们将通过一个实例来演示如何使用jQuery实现点击更多显示的效果。

首先，我们需要引入jQuery库，可以通过CDN方式引入，也可以将jQuery库下载到本地并引入。以CDN方式为例，代码如下：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

接着，我们需要在HTML中进行相关的布局，例如：

<div class="card">
  <h2>这是一个标题</h2>
  <p>这是一段文字，可能比较长，需要进行折叠。</p>
  <a class="show-more">更多</a>
  <a class="show-less">收起</a>
</div>

在这个例子中，我们使用一个带有标题和内容的卡片布局，并添加了两个链接，分别是“更多”和“收起”。

接下来，我们可以使用jQuery来实现点击更多显示的效果。具体代码如下：

$(function() {
  // 隐藏“收起”链接
  $(".show-less").hide();
  // 获取要显示的元素
  var content = $(".card p");
  // 要显示的字符数
  var chars = 100;
  // 如果内容长度小于字符数，不进行折叠处理
  if (content.text().length > chars) {
    // 隐藏超出字符数的内容
    var short = content.text().substr(0, chars);
    var long = content.text().substr(chars);
    content.html(short + '<span class="d-inline-block ellipsis">...</span><span class="long d-none">' + long + '</span>');
    // 点击更多
    $(".show-more").click(function() {
      $(this).hide();
      $(".show-less").show();
      $(".card p .long").removeClass("d-none");
      $(".card p .ellipsis").addClass("d-none");
    });
    // 点击收起
    $(".show-less").click(function() {
      $(this).hide();
      $(".show-more").show();
      $(".card p .long").addClass("d-none");
      $(".card p .ellipsis").removeClass("d-none");
    });
  }
});

上述代码的逻辑大致如下：

1. 首先，我们先将“收起”链接进行隐藏，因为初始状态下，要显示的元素已经是折叠状态；
2. 然后，我们获取要折叠的内容元素，以及要显示的字符数；
3. 如果要显示的内容长度小于字符数，则不进行折叠处理；
4. 否则，我们需要将超出字符数的内容进行隐藏，并在结尾处添加“...”符号；
5. 当用户点击“更多”链接时，我们需要将超出字符数的内容进行展开，并隐藏“...”符号和“更多”链接；
6. 当用户点击“收起”链接时，我们需要将超出字符数的内容进行折叠，并显示“...”符号和“更多”链接。

上述逻辑其实十分简单，但需要注意的点也很多。下面我们对其中的一些关键点进行解释。

首先，我们在HTML中添加了一个带有“.long”类的元素，用于隐藏超出字符数的内容。在CSS中可以这么定义：

.long {
  white-space: pre-wrap;
}

这里我们将它的white-space属性设置为“pre-wrap”，主要是为了防止出现单词被截断的情况。在浏览器中，默认情况下white-space的属性值为“normal”，即不会自动换行，只会在遇到空格或制表符时进行断行。

其次，我们在HTML中添加了一个带有“.ellipsis”类的元素，用于添加省略号“...”。在CSS中可以这么定义：

.ellipsis:before {

  font-weight: bold;
}

最后，我们需要注意到，在jQuery事件绑定时，使用的是click事件。随着HTML5的发展，click事件在移动端不是很友好，因为移动端的touch事件与click事件相似，但不完全相同。为了兼容各种设备和浏览器，推荐使用jQuery的on方法来绑定事件，可以根据实际需要选择绑定的事件。

综上所述，基于jQuery的点击更多显示功能可以为我们的网站提供良好的用户体验，让用户更加自由地选择是否展开所有内容。

以上就是jquery文字隐藏点击更多显示的详细内容，更多请关注php中文网其它相关文章！