jQuery實現(xiàn)文章收起與展開功能

更新時間：2021年08月18日 09:22:58 作者：藍色的冰塊

這篇文章主要為大家詳細介紹了jQuery實現(xiàn)文章收起與展開功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jQuery實現(xiàn)文章收起與展開功能的具體代碼，供大家參考，具體內(nèi)容如下

廢話不多說，直接上代碼

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>文章</title>
 </head>
 <body>
  <div>
   <p>文章收起與展開功能</p>
   <div class="item">
    <div>
     <div style="color: #409EFF;">超過字數(shù)</div>
     <span class="article">
      MQTT是輕量級基于代理的發(fā)布/訂閱的消息傳輸協(xié)議，設計思想是開放、簡單、輕量、易于實現(xiàn)。
      這些特點使它適用于受限環(huán)境。網(wǎng)絡代價昂貴，帶寬低、不可靠。
      在嵌入設備中運行，處理器和內(nèi)存資源有限。該協(xié)議的特點有：
      使用發(fā)布/訂閱消息模式，提供一對多的消息發(fā)布，解除應用程序耦合。
      對負載內(nèi)容屏蔽的消息傳輸。
      使用 TCP/IP 提供網(wǎng)絡連接。
     </span>
     <span class="see" style="color: #409EFF;"></span>
    </div>
   </div>
   <br />
   <div class="item">
    <div>
     <div style="color: #409EFF;">未超過字數(shù)</div>
     <span class="article">ABCDEFGHIJKLNMOPQRSTUVWXYZ</span>
     <span class="see" style="color: #409EFF;"></span>
    </div>
   </div>
   <br />
   <div class="item">
    <div>
     <div style="color: #409EFF;">超過字數(shù)</div>
     <span class="article">
      MOS的正確與否直接影響硬盤的正常使用，這里主要指其中的硬盤類型。
      好在現(xiàn)在的機器都支持”IDE auto detect”的功能，可自動檢測硬盤的類型。
      當連接新的硬盤或者更換新的硬盤后都要通過此功能重新進行設置類型。
      當然，現(xiàn)在有的類型的主板可自動識別硬盤的類型。
      當硬盤類型錯誤時，有時干脆無法啟動系統(tǒng)，有時能夠啟動，但會發(fā)生讀寫錯誤。
     </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(){
   //記錄文章當前狀態(tài)
   var onoff = false;
   //使用$().each遍歷設置每一篇文章
   $('.item').each(function() {
    //使用$(this).find()獲取當前文章DOM
    var article = $(this).find('.article');
    //獲取文章內(nèi)容
    var str = article.text();
    //使用$(this).find()獲取展開收起的DOM
    var see = $(this).find('.see');
    //當文章字數(shù)超過50個字時,只顯示前50個字
    if (str.length > 50) {
     article.text(str.substr(0, 50) + '......');
     see.text('[查看]');  //在文章末尾顯示查看按鈕
    }
    //設置按鈕監(jiān)聽
    see.click(function() {
     if (onoff) {
      article.text(str.substr(0, 50) + '......');
      see.text('[查看]');
     } else {
      article.text(str);
      see.text('[收起]');
     }
     onoff = !onoff
    });
   });
  });
 </script>
</html>