隐藏部分文字和显示全部文字的函数

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>显示隐藏文字</title>
 6 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
 7 </head>
 8 <body>
 9 <div>
10 <p class="str">用js实现段落多余文字省略显示,ps:是段落不是一行。不要纯css的。不要jquery的。虽然最好是后台程序写,但是现在只要js的。用js实现段落多余文字省略显示,ps:是段落不是一行。不要纯css的。不要jquery的。虽然最好是后台程序写,但是现在只要js的。用js实现段落多余文字省略显示,ps:是段落不是一行。不要纯css的。不要jquery的。虽然最好是后台程序写,但是现在只要js的。用js实现段落多余文字省略显示,ps:是段落不是一行。不要纯css的。不要jquery的。虽然最好是后台程序写,但是现在只要js的。用js实现段落多余文字省略显示,ps:是段落不是一行。不要纯css的。不要jquery的。虽然最好是后台程序写,但是现在只要js的。用js实现段落多余文字省略显示,ps:是段落不是一行。不要纯css的。不要jquery的。虽然最好是后台程序写,但是现在只要js的。用js实现段落多余文字省略显示,ps:是段落不是一行。不要纯css的。不要jquery的。虽然最好是后台程序写,但是现在只要js的。</p>
11 </div>
12 <script type="text/javascript">
13 
14 function showandhide(sid,length) {
15 //显示或者隐藏教师机构部分信息
16 var str = $(sid).text();
17 strlen = str.length;
18 if(strlen > length) {
19 newstr = str.slice(0,length);
20 $(sid).html(newstr + "...<a class='showall' href='javascript:void(0)'> 显示全部</a>");
21 $(".showall").die().live("click",function(){
22 $(this).parent().html(str + " <a class='hideall' href='javascript:void(0)'> 隐藏部分</a>");
23 });
24 $(".hideall").die().live("click",function(){
25 $(this).parent().html(newstr + "...<a class='showall' href='javascript:void(0)'>显示全部</a>");
26 });
27 }
28 }
29 
30 $(function(){
31 showandhide(".str","90");
32 })
33 </script>
34 </body>
35 </html>
36   

写的一个前端截字函数

posted @ 2012-09-14 20:51  liufeilai  阅读(538)  评论(0编辑  收藏  举报