jquery实现多余文字显示或隐藏

[javascript] view plain copy

1. 实现目标：在一单元格中显示部分内容，多余出来的内容隐藏，在显示的内容后面有省略号与显示按钮，点击显示后，显示全部文字，并显示隐藏按钮，javascript代码如下：  
2.   
3. // 每行显示21个字，超过省略，用查看更多  
4.                     var disLen = 29;  
5.                     var len = detail.length;  
6.   
7.                     if (len > disLen) {  
8.                         detail ="<div>" + detail.substring(0, disLen) + "<span style='font-size:25px' class='hide" + i + "'>...</span><span class='hide" + i  
9.                         + "' style = 'display:none'>" + detail.substring(disLen + 1, len)  
10.                         + "</span> </div><div><a href='#youhui' οnclick='showHideCode(" + i + ")'><span class='hide" + i  
11.                         + "'>查看更多</span><span class='hide" + i + "' style = 'display:none'>隐藏</span></a></div>";  
12.                     }  
13.   
14.   
15. function showHideCode(i) {  
16.             $(".hide" + i).toggle();              
17.         }