【jquery】檢視全文/收起
阿新 • • 發佈：2018-12-06
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .content { width: 500px; background-color: #ccc; line-height: 26px; } a{ text-decoration: none; color: red; } </style> </head> <body> <div class="content"> 2005年以後，網際網路進入Web2.0時代，各種類似桌面軟體的Web應用大量湧現，網站的前端由此發生了翻天覆地的變化。網頁不再只是承載單一的文字和圖片，各種富媒體讓網頁的內容更加生動，網頁上軟體化的互動形式為使用者提供了更好的使用體驗，這些都是基於前端技術實現的。以前會Photoshop和Dreamweaver就可以製作網頁，現在只掌握這些已經遠遠不夠了。</div> </body> <script src="jquery-1.3.1.min.js"></script> <script> init(); function init(){ var len = 60; //預設顯示字數 var ctn = $(".content"); //獲取div物件 var content = ctn.text(); //獲取div裡的內容 // alert(content);var span = "<span>"+content.substring(0,len)+"</span>"; //建立<span>元素 var haha = content.length>len?"全文":""; var a = "<a href='javascript:void(0)' class='initAll'>"+haha+"</a>"; //建立<a>元素 // 設定div內容為空，span元素 a元素加入到div中 ctn.text(""); ctn.append(span); ctn.append(a); $(".initAll").click(function(){ var _this = $(this); // console.log(_this.text(),content) if(_this.text() == "全文"){ //如果a中含有"展開"則顯示"收起" _this.text("<<收起"); _this.prev('span').text(content); }else{ _this.text("全文"); _this.prev('span').text(content.substring(0,len)); } }); } </script> </html>