jQuery implements article collapse and expansion functions

This article example shares the specific code of jQuery to realize the article collapse and expansion functions for your reference. The specific content is as follows

Without further ado, let's get straight to the code

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Article</title>
 </head>
 <body>
  <div>
   <p>Article collapse and expansion function</p>
   <div class="item">
    <div>
     <div style="color: #409EFF;">Exceeds word limit</div>
     <span class="article">
      MQTT is a lightweight, proxy-based publish/subscribe message transmission protocol designed to be open, simple, lightweight, and easy to implement.
      These features make it suitable for use in constrained environments. Networks are expensive, have low bandwidth, and are unreliable.
      Running on embedded devices with limited processor and memory resources. The features of this agreement are:
      Use the publish/subscribe messaging model to provide one-to-many message publishing and decouple applications.
      Message transmission with payload content shielded.
      Provides network connectivity using TCP/IP.
     </span>
     <span class="see" style="color: #409EFF;"></span>
    </div>
   </div>
   <br />
   <div class="item">
    <div>
     <div style="color: #409EFF;">Does not exceed the word count</div>
     <span class="article">ABCDEFGHIJKLNMOPQRSTUVWXYZ</span>
     <span class="see" style="color: #409EFF;"></span>
    </div>
   </div>
   <br />
   <div class="item">
    <div>
     <div style="color: #409EFF;">Exceeds word limit</div>
     <span class="article">
      The correctness of MOS directly affects the normal use of the hard disk, mainly referring to the hard disk type.
      Fortunately, current machines all support the "IDE auto detect" function, which can automatically detect the type of hard disk.
      When you connect a new hard disk or replace the hard disk with a new one, you need to use this function to reset the type.
      Of course, some types of motherboards now can automatically identify the type of hard drive.
      When the hard disk type is wrong, sometimes the system cannot be started at all, and sometimes it can be started but read and write errors will occur.
     </span>
     <span class="see" style="color: #409EFF;"></span>
    </div>
   </div>
  </div>
 </body>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <script type="text/javascript">
  $(document).ready(function(){
   //Record the current status of the article var onoff = false;
   //Use $().each to traverse and set each article$('.item').each(function() {
    //Use $(this).find() to get the current article DOM
    var article = $(this).find('.article');
    //Get the article content var str = article.text();
    //Use $(this).find() to get the expanded and collapsed DOM
    var see = $(this).find('.see');
    //When the article has more than 50 words, only the first 50 words are displayed if (str.length > 50) {
     article.text(str.substr(0, 50) + '......');
     see.text('[View]'); //Display the view button at the end of the article}
    //Set button listener see.click(function() {
     if (onoff) {
      article.text(str.substr(0, 50) + '......');
      see.text('[View]');
     } else {
      article.text(str);
      see.text('[收起]');
     }
     onoff = !onoff
    });
   });
  });
 </script>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: