效果目標圖：
這個還是比較好實現的，附源碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>點擊查看全文</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <style type="text/css"> *{ padding: 0; margin: 0; } .showAll{ width: 60%; margin: 0 auto; background: #ecebeb; padding: 10px; } .showAll .title{ font-size: 20px; font-weight: bold; color:#af0015; } .showAll .author{ color: #a1a1a1; margin: 12px 0; } .showAll .content{ display: none; //注意這里讓文字不顯示 } </style> <script type="text/javascript"> $(document).ready(function(){ $(".showContent").click(function(){ //當“展開全文”按鈕點擊的時候 $(".content").show(); //展示未完全顯示的那部分內容 $(this).parent().hide(); //此處需要注意隱藏簡略說明的文字，因為原來文字里面最后有省略號，不隱藏的后果就是展開后省略號仍舊在那里 }); $(".hideContent").click(function(){ //當“收起全文”按鈕點擊的時候 $(this).parent().hide(); //隱藏已經顯示出來的文字 $(".showContent").parent().show(); //將簡略說明的文字顯示出來 }); }); </script> </head> <body> <div class="showAll"> <p class="title"> 一則勵志故事 </p> <p class="author"> 作者：來自網絡 發表時間：2014-3-1 </p> <p> 彼得·韓德先生現任卡內基公司 (Dale Carnegie & Associates) 總裁及首席執行官。卡內基公司為訓練界中的翹楚,在全世界85個國家有160個分支機構。 除此之外，彼得先生還是數家大公司的董事，作為一個培訓別人怎樣獲得成功的專業機構的總裁，他是怎樣獲得成功的呢？日前，記者在北京的東方君悅大酒店采訪了 這位CEO，聽他講述了自己是怎樣獲得成功的故事。 彼得先生通過一個故事講了他對成功的理解。他說他在五歲時因為生病去看醫生，當時病痛... <a class="showContent" href="javascript:void(0);">查看全文</a> </p> <div class="content"> 彼得·韓德先生現任卡內基公司 (Dale Carnegie & Associates) 總裁及首席執行官。卡內基公司為訓練界中的翹楚,在全世界85個國家有160個分支機構。 除此之外，彼得先生還是數家大公司的董事，作為一個培訓別人怎樣獲得成功的專業機構的總裁，他是怎樣獲得成功的呢？日前，記者在北京的東方君悅大酒店采訪了 這位CEO，聽他講述了自己是怎樣獲得成功的故事。 彼得先生通過一個故事講了他對成功的理解。他說他在五歲時因為生病去看醫生，當時病痛使他很難受，醫生當時問他，你最想要的是什么，彼得先生對醫生說，我想 要快樂，醫生說，那你快樂就是了，結果他真的很快樂。所以彼得先生說，有許多人想追求成功，也有許多人問他，怎樣才能盡快地獲得成功。他認為，這要先看你對 成功的定義是什么？你的成功定義若是家庭和諧，那你就應想辦法跟家庭成員更多地溝通，為此付出更多的時間，並在提升家庭成員的和諧之中也提升自己處理家庭問 題的能力。 彼得先生說：“我對成功的定義是快樂，我不會做我不喜歡的事和不喜歡的工作。中國的一句俗語說‘人在屋檐下，不得不低頭'，我不喜歡那樣的境況，我也不會那樣 做。由於我認為快樂就是成功，所以說，我在5歲時就已經很成功了。” <a class="hideContent" href="javascript:void(0);">收起全文</a> </div> </div> </body> </html>
但上面只是靜態的，但如果是動態的，成百上千條的數據，這時候就需要用到動態html了。
也就是需要在html頁面借助for循環來實現展示效果。（讓其產生多個li標簽）
那么上面這樣寫就會有問題。因為這樣會讓所有的包含class 為content的標簽產生影響。所以js代碼那塊有問題。所以就需要使用id來改變隱藏和顯示狀態，而不應該用class。
然后又想id怎么自增。但是讓其自增了，又怎么獲取該標簽自增后的id。因為在上面隱藏和展示的代碼里面需要獲取該id，之后就不會寫了。。。不會js，需要學一下。
另外附上可以讓其產生這種效果的css代碼：
像這種加了省略號，加了個閱讀全文是怎么做到的
p {
width:600px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
/*-webkit-line-clamp: 3;超出3行部分顯示省略號，去掉該屬性 顯示全部*/
line-height: 1.5em;
height:4.5em;
overflow-y: hidden;
-webkit-box-orient: vertical;
}
還有別的方法控制，用js控制應該也可以，待后期學到一定程度，實現一下這個功能。
看下面這篇文章有點幫助：
http://www.luyixian.cn/javascript_show_144212.aspx
