jquery特效（1）—点击展示与隐藏全文
生活随笔
收集整理的這篇文章主要介紹了
jquery特效（1）—点击展示与隐藏全文
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
下班了~~~我把今天整理的一個jquery小特效發一下，個人覺得比較簡單，嗖嗖的就寫出來了~~~
下面先來看最終的動態效果：
?
一、來看一下主體框架程序：
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>點擊查看全文</title><link type="text/css" rel="stylesheet" href="css/layout.css" /><script type="text/javascript" src="js/jquery-1.11.3.js"></script><script type="text/javascript" src="js/layout.js"></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>上面程序布局需要注意的是名字為“content”的div里面的內容需要與省略號“. . .”以前的文字保持一致，也就是重復一段文字。
原因是：因為省略號“. . .”以前的文字會在點擊“查看全文”按鈕的時候隱藏，如果不隱藏省略號“. . .”之前的文字的話，它會在點擊“查看全文”按鈕后“. . .”不消失，這樣文章就不能順利閱讀了~~~~
?
二、下面來看看樣式：
*{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; //注意這里讓文字不顯示 }上面需要注意的是需要給名字為“content”的div隱藏，這樣點擊“查看全文”按鈕后才可以觸發顯示事件。
?
三、Jquery程序：
$(document).ready(function(){$(".showContent").click(function(){ //當“展開全文”按鈕點擊的時候$(".content").show(); //展示未完全顯示的那部分內容$(this).parent().hide(); //此處需要注意隱藏簡略說明的文字，因為原來文字里面最后有省略號，不隱藏的后果就是展開后省略號仍舊在那里});$(".hideContent").click(function(){ //當“收起全文”按鈕點擊的時候$(this).parent().hide(); //隱藏已經顯示出來的文字$(".showContent").parent().show(); //將簡略說明的文字顯示出來}); });看了上面一段代碼我笑了，真是太簡單了~~~~覺得貼到博客園讓大神看見了一定會嘲笑我O(∩_∩)O~~~，本人有個毛病，特別愛寫注釋，方便以后看~~~~
不要給我說你看不懂，要不然我都會鄙視你，我把注釋寫的那么清楚，小白都能看懂~~~~
轉載于:https://www.cnblogs.com/lily1010/p/4861782.html
總結
以上是生活随笔為你收集整理的jquery特效（1）—点击展示与隐藏全文的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： AJAX+json+jquery实现预加
- 下一篇： UML 绘图关系