jquery text hide click to show more

With the development of Internet technology, the user experience of websites has received more and more attention. In website design, how to better display content and improve users' reading experience has become an important topic.

For longer page content, in order to avoid the page being too long, we usually use the method of folding the text or clicking more, so that users can choose whether to expand the full text. In web development, jQuery is one of the widely used tool libraries. Below we will use an example to demonstrate how to use jQuery to achieve the effect of clicking more to display.

First of all, we need to introduce the jQuery library, which can be introduced through CDN, or you can download the jQuery library locally and import it. Taking the CDN method as an example, the code is as follows:

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

Next, we need to perform relevant layout in HTML, for example:

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

In this example, we use a page with title and content card layout and added two links, "More" and "Collapse".

Next, we can use jQuery to achieve the effect of clicking more to display. The specific code is as follows:

$(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");
    });
  }
});

The logic of the above code is roughly as follows:

1. First, we hide the "Collapse" link first, because in the initial state, the element to be displayed has already been Is the folded state;
2. Then, we get the content element to be folded and the number of characters to be displayed;
3. If the length of the content to be displayed is less than the number of characters, no folding processing is performed;
4. Otherwise, we need to hide the content that exceeds the number of characters and add a "..." symbol at the end;
5. When the user clicks the "More" link, we need to hide the content that exceeds the number of characters. Expand the content that exceeds the number of characters, and hide the "..." symbol and the "More" link;
6. When the user clicks the "Collapse" link, we need to collapse the content that exceeds the number of characters, and Shows the "..." symbol and the "More" link.

The above logic is actually very simple, but there are many points that need to be paid attention to. Below we explain some of the key points.

First, we add an element with the ".long" class in the HTML to hide content that exceeds the number of characters. It can be defined like this in CSS:

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

Here we set its white-space attribute to "pre-wrap", mainly to prevent words from being truncated. In the browser, the white-space attribute value is "normal" by default, that is, it will not automatically wrap lines, and will only break lines when a space or tab character is encountered.

Secondly, we added an element with the ".ellipsis" class in the HTML to add the ellipsis "...". It can be defined like this in CSS:

.ellipsis:before {

  font-weight: bold;
}

Finally, we need to note that when binding jQuery events, the click event is used. With the development of HTML5, the click event is not very friendly on the mobile side, because the touch event on the mobile side is similar to the click event, but not exactly the same. In order to be compatible with various devices and browsers, it is recommended to use jQuery's on method to bind events. You can choose the bound events according to actual needs.

To sum up, the click-to-show function based on jQuery can provide a good user experience for our website, allowing users to more freely choose whether to expand all content.

The above is the detailed content of jquery text hide click to show more. For more information, please follow other related articles on the PHP Chinese website!