如何过多文字显示更多按钮,点击可显示更多文字或者隐藏部分文字

  • A+
所属分类:Web前端
摘要

由于介绍比较多,可以将部分文字隐藏,点击更多按钮,将全部文字显示出来

由于介绍比较多,可以将部分文字隐藏,点击更多按钮,将全部文字显示出来

如何过多文字显示更多按钮,点击可显示更多文字或者隐藏部分文字

同时,如果文字全部显示出来,就显示“收缩”

 直接上js代码

 1  function showmore(contentid){  2         var len = 300;      //默认显示字数  3         var ctn = document.getElementById(contentid);  //获取div对象  4         var content = ctn.innerHTML;                   //获取div里的内容  5 content2 = content.replace(/(^s*)|(s*$)/g, "");   6 content2= content2.replace(/<[^>]+>/g,"");//去掉所有的html标记  7   8  //alert(content);  9         var span = document.createElement("span");     //创建<span>元素 10         var a = document.createElement("a");           //创建<a>元素 11         span.innerHTML = content2.substring(0,len);     //span里的内容为content的前len个字符 12  13         a.innerHTML = content.length>len?"... 展开":"";  ////判断显示的字数是否大于默认显示的字数    来设置a的显示         14         a.href = "javascript:void(0)";//让a链接点击不跳转 15  16         a.onclick = function(){ 17             if(a.innerHTML.indexOf("展开")>0){      //如果a中含有"展开"则显示"收起" 18               a.innerHTML = "<<&nbsp;收起"; 19               span.innerHTML = content; 20             }else{ 21                 a.innerHTML = "... 展开"; 22                 span.innerHTML = content.substring(0,len); 23             } 24         } 25         // 设置div内容为空,span元素 a元素加入到div中 26         ctn.innerHTML = ""; 27         ctn.appendChild(span); 28         ctn.appendChild(a); 29      }        

前台调用的时候写上:

showmore('aboutuscontent');//aboutuscontent是id名