<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div class="para para1" style="500px;margin:10px auto;"> <p style="display:inline"> 抽象功能不够强，以及一些需要的功能还没实现。整个框架十分轻量级，产出的结果是一大堆引用文件和样板： 而且应用的规模越大这一点就会越明显。抽象功能不够强，以及一些需要的功能还没实现。整个框架十分轻量级， 产出的结果是一大堆引用文件和样板：而且应用的规模越大这一点就会越明显。 </p><a href='javascript:void (0);'>更多</a> </div> </body> <script src="jquery-1.11.3.min.js"></script> <script> $(function(){ var $text=$(".para p").html(); var $text1=$text.substr(0,80)+"..."; $(".para1 p").html($text1); $(".para1 a").html("更多"); $(".para1 a").on("click",function(e){ /*var e = e || event;*/ $(e.currentTarget).parent().toggleClass("para1"); $(".para p").html($text); $(".para a").html("收缩"); $(".para1 p").html($text1); $(".para1 a").html("更多"); }) }) </script> </html>