【JavaScript】实现全文收起功能

1. js代码

这里的这个id是元素的id，因为数据不可能只有一条，所以需要动态来处理

function init(id){
        var len = 60;      //默认显示字数
        var ctn = document.getElementById(id);  //获取div对象
        var content = ctn.innerHTML;                   //获取div里的内容
        var span = document.createElement("span");     //创建<span>元素
        var a = document.createElement("a");           //创建<a>元素
        span.innerHTML = content.substring(0,len);     //span里的内容为content的前len个字符
        a.innerHTML = content.length>len?" 全文":"";  判断显示的字数是否大于默认显示的字数    来设置a的显示
        a.href = "javascript:void(0)";//让a链接点击不跳转
        a.onclick = function(){
            if(a.innerHTML.indexOf("全文")>0){      //如果a中含有"展开"则显示"收起"
              a.innerHTML = "收起";
              span.innerHTML = content;
            }else{
                a.innerHTML = " 全文";
                span.innerHTML = content.substring(0,len);
            }
        };
        // 设置div内容为空，span元素 a元素加入到div中
        ctn.innerHTML = "";
        ctn.appendChild(span);
        ctn.appendChild(a);
     }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
 

2. 引用

这里切记需要处理一下，在之前碰到了获取不到页面的元素，最后把js的执行放到元素加载完在执行，并且把元素的id值加上数据id给传过去即可

3. html代码

模板引擎使用的是template

4. 效果

文章来源: blog.csdn.net，作者：咔咔-，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/fangkang7/article/details/103420751