<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="para para1" style="width: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>
