<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery文本段落展開和摺疊效果</title> <style> html,body,div,h2,p{margin: 0;padding: 0;} html{font: 1em Arial, Helvetica, sans-serif;color: #444;} a{color: #0087f1;} p{margin-bottom: 5px;} #container{margin: 0 auto;width: 600px;} #container h2{font-size: 20px;color: #0087f1;} #wrap{position: relative;padding: 10px;overflow: hidden;} #gradient{width: 100%;height: 35px;background: url() repeat-x;position: absolute;bottom: 0;left: 0;} #read-more{padding: 5px;border-top: 4px double #ddd;background: #fff;color: #333;} #read-more a{padding-right: 22px;background: url() no-repeat 100% 50%;font-weight: bold;text-decoration: none;} #read-more a: hover{color: #000;} </style> <script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(function(){ var slideHeight = 75; // px var defHeight = $('#wrap').height(); if(defHeight >= slideHeight){ $('#wrap').css('height' , slideHeight + 'px'); $('#read-more').append('<a href="#">點擊查看更多。。</a>'); $('#read-more a').click(function(){ var curHeight = $('#wrap').height(); if(curHeight == slideHeight){ $('#wrap').animate({ height: defHeight }, "normal"); $('#read-more a').html('點擊隱藏'); $('#gradient').fadeOut(); }else{ $('#wrap').animate({ height: slideHeight }, "normal"); $('#read-more a').html('點擊查看更多。。'); $('#gradient').fadeIn(); } return false; }); } }); </script> </head> <body> <div id="container"> <h1>jQuery 控制段落文字展開摺疊，點擊查看更多的功能</h1> <div id="wrap"> <div> <p>測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</p> </div> <div id="gradient"></div> </div> <div id="read-more"></div> </div> </body> </html>