快捷導(dǎo)航

jquery特效點(diǎn)擊展示與隱藏全文

更新時(shí)間：2015年12月09日 20:01:14 作者：Sunshine_lily

這篇文章主要介紹了jquery特效，實(shí)現(xiàn)點(diǎn)擊展示與隱藏全文特效，實(shí)現(xiàn)方法很簡單，具有一定的借鑒參考價(jià)值，感興趣的小朋友可以參考一下

本文實(shí)例講述了jquery點(diǎn)擊展示與隱藏全文特效，這里使用jquery實(shí)現(xiàn)展開、隱藏特效，點(diǎn)擊查看全文后內(nèi)容展開，點(diǎn)擊收起全文其內(nèi)容收縮，分享給大家供大家參考。具體如下：

運(yùn)行效果截圖如下：

具體代碼如下

一、來看一下主體框架程序：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>點(diǎn)擊查看全文</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">
        一則勵(lì)志故事              
      </p>
      <p class="author">
         作者：來自網(wǎng)絡(luò) 發(fā)表時(shí)間：2014-3-1
      </p>
      <p>
        彼得·韓德先生現(xiàn)任卡內(nèi)基公司 (Dale Carnegie & Associates) 總裁及首席執(zhí)行官?？▋?nèi)基公司為訓(xùn)練界中的翹楚,在全世界85個(gè)國家有160個(gè)分支機(jī)構(gòu)。 
        除此之外，彼得先生還是數(shù)家大公司的董事，作為一個(gè)培訓(xùn)別人怎樣獲得成功的專業(yè)機(jī)構(gòu)的總裁，他是怎樣獲得成功的呢？日前，記者在北京的東方君悅大酒店采訪了
        這位CEO，聽他講述了自己是怎樣獲得成功的故事。 
        彼得先生通過一個(gè)故事講了他對成功的理解。他說他在五歲時(shí)因?yàn)樯∪タ瘁t(yī)生，當(dāng)時(shí)病痛...
        <a class="showContent" href="javascript:void(0);">查看全文</a>
      </p>
      <div class="content">
        彼得·韓德先生現(xiàn)任卡內(nèi)基公司 (Dale Carnegie & Associates) 總裁及首席執(zhí)行官?？▋?nèi)基公司為訓(xùn)練界中的翹楚,在全世界85個(gè)國家有160個(gè)分支機(jī)構(gòu)。
         除此之外，彼得先生還是數(shù)家大公司的董事，作為一個(gè)培訓(xùn)別人怎樣獲得成功的專業(yè)機(jī)構(gòu)的總裁，他是怎樣獲得成功的呢？日前，記者在北京的東方君悅大酒店采訪了
         這位CEO，聽他講述了自己是怎樣獲得成功的故事。 
         彼得先生通過一個(gè)故事講了他對成功的理解。他說他在五歲時(shí)因?yàn)樯∪タ瘁t(yī)生，當(dāng)時(shí)病痛使他很難受，醫(yī)生當(dāng)時(shí)問他，你最想要的是什么，彼得先生對醫(yī)生說，我想
         要快樂，醫(yī)生說，那你快樂就是了，結(jié)果他真的很快樂。所以彼得先生說，有許多人想追求成功，也有許多人問他，怎樣才能盡快地獲得成功。他認(rèn)為，這要先看你對
         成功的定義是什么？你的成功定義若是家庭和諧，那你就應(yīng)想辦法跟家庭成員更多地溝通，為此付出更多的時(shí)間，并在提升家庭成員的和諧之中也提升自己處理家庭問
         題的能力。 
         彼得先生說：“我對成功的定義是快樂，我不會(huì)做我不喜歡的事和不喜歡的工作。中國的一句俗語說‘人在屋檐下，不得不低頭'，我不喜歡那樣的境況，我也不會(huì)那樣
         做。由于我認(rèn)為快樂就是成功，所以說，我在5歲時(shí)就已經(jīng)很成功了。” 
         <a class="hideContent" href="javascript:void(0);">收起全文</a>
      </div>   
    </div>    
  </body>
</html>

上面程序布局需要注意的是名字為“content”的div里面的內(nèi)容需要與省略號“. . .”以前的文字保持一致，也就是重復(fù)一段文字。

原因：因?yàn)槭÷蕴枴? . .”以前的文字會(huì)在點(diǎn)擊“查看全文”按鈕的時(shí)候隱藏，如果不隱藏省略號“. . .”之前的文字的話，它會(huì)在點(diǎn)擊“查看全文”按鈕后“. . .”不消失，這樣文章就不能順利閱讀了~~~~

二、下面來看看樣式：

*{
  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隱藏，這樣點(diǎn)擊“查看全文”按鈕后才可以觸發(fā)顯示事件。
三、Jquery程序：

$(document).ready(function(){
  $(".showContent").click(function(){        //當(dāng)“展開全文”按鈕點(diǎn)擊的時(shí)候
    $(".content").show();             //展示未完全顯示的那部分內(nèi)容
    $(this).parent().hide();           //此處需要注意隱藏簡略說明的文字，因?yàn)樵瓉砦淖掷锩孀詈笥惺÷蕴?，不隱藏的后果就是展開后省略號仍舊在那里
  });
  $(".hideContent").click(function(){         //當(dāng)“收起全文”按鈕點(diǎn)擊的時(shí)候
    $(this).parent().hide();           //隱藏已經(jīng)顯示出來的文字
    $(".showContent").parent().show();       //將簡略說明的文字顯示出來
  });
});

希望本文所述對大家學(xué)習(xí)jquery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: