頁面先展示一部分, 然后點擊展開更多, 再顯示更多的信息,這是我們經(jīng)常看到效果
實例效果如下:
代碼如下:
<style type="text/css"> *{padding: 0; margin:0;} .aboutUsDetail{ width: 300px; margin: 0 auto; line-height: 22px !important; overflow: hidden; height: 88px; } .more{ display: block; font-size: 18px; width: 160px; height: 36px; line-height:36px; text-align: center; color: #0171bf; border:1px solid #0171bf; border-radius: 30px; margin: 30px auto; } </style> <div class="article aboutUsDetail"> <div> 南昌雅騰信息科技有限公司(YT)是一家專注高薪IT職業(yè)技能培訓的機構(gòu), 主要培養(yǎng):php軟件開發(fā)工程師、web前端開發(fā)工程師、JAVA開發(fā)工程師、UI設(shè)計師等; 雅騰教育采用“小班現(xiàn)場授課”、技術(shù)總監(jiān)“手把手輔導學員”、“理論知識與企業(yè)真實項目實戰(zhàn)”結(jié)合的培養(yǎng)方式, 更加注重學員的實戰(zhàn)能力培養(yǎng),加強學員項目實戰(zhàn)經(jīng)驗的積累,始終堅持以提升學員的自身價值, 加強學員的高薪就業(yè)能力為核心,實行品質(zhì)高效的IT技術(shù)培訓,實現(xiàn)一地學習全國就業(yè)的高品質(zhì)教育服務(wù) </div> </div> <a href="javascript:void(0);" class="more extend">展開更多</a>
$(function(){ $(".extend").on("click",function(){ if($(this).text() == "展開更多"){ $(".aboutUsDetail").animate({height:$(".aboutUsDetail>div").height()+"px"},1000); $(this).text("收縮"); } else{ $(this).text("展開更多"); $(".aboutUsDetail").animate({height:"88px"},1000); } }) })