首页  >  文章  >  web前端  >  jquery文字隐藏点击更多显示

jquery文字隐藏点击更多显示

王林
王林原创
2023-05-18 14:33:39656浏览

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

针对较长的页面内容,为了避免页面过长,我们通常会使用文字折叠或点击更多的方式,让用户可以自主选择是否展开全文。在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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn