快捷導(dǎo)航

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

更新時(shí)間：2021年08月18日 09:22:58 作者：藍(lán)色的冰塊

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

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