javascript实现一段文字展开、收起（默认收起）

html

<div id="content">
      人的一生总有很多回忆是挥之不去的，青春的记忆就像五彩斑斓的花束，散发着淡雅的馨香，我曾小心翼翼地将它们修剪成干枝夹在《繁星诗集》里陈放多年。 
</div>

css

<style>
    #content {
      width: 500px;
      background-color: #ccc;
      line-height: 26px;
    }
    a {
      text-decoration: none;
      color: red;
    }
</style>

js

<script>
     function init(){
        var len = 20;      //默认显示字数
        var ctn = document.getElementById("content");  //获取div对象
        var content = ctn.innerHTML;                   //获取div里的内容

        //alert(content);
        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 = "<<&nbsp;收起";
              span.innerHTML = content;
            }else{
                a.innerHTML = "... 展开";
                span.innerHTML = content.substring(0,len);
            }
        }
        // 设置div内容为空，span元素 a元素加入到div中
        ctn.innerHTML = "";
        ctn.appendChild(span);
        ctn.appendChild(a);
     }
</script> 

以上就是实现展开、收起效果的代码。

如果不用箭头符号来表示，而是以图片形式来展示那么就使用下面代码替换相应代码：

a.innerHTML = content.length>len?“展开”:“”; //设置a的显示

原文链接：https://blog.csdn.net/erdouzhang/article/details/71105188