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

当前位置:

首页 > temp > JavaScript教程 >

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

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

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

直接上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名

来源：https://www.cnblogs.com/fu7n/p/15433187.html

栏目列表