如何实现展开收缩？

展开收缩

• 核心：点击展开a标签展开内容，改变a的内容，借助‘开关’，实现功能。
• 实现功能

页面部分

<div id="box">
        <span>嘴硬到底是什么概念 大概就是 你问我怎么了 其实我眼泪都要掉下来了 但我还是说了句 算了 就这样吧 ——网易云热评《你就不要想起我》</span><a href="javascript:;">收缩</a>
    </div>

javaScript部分

//获取元素
var span = document.querySelector('span');
var a = document.querySelector('a');
//获取span中的内容
var str = span.innerText;
//截取部分内容连接上...
var sub = str.substring(0,10) + '...';
//设置开关
var onoff = true;
a.onclick = function(){
	if(onoff){//判断是true 或 false 前者是收缩状态，后者是展开状态；
		span.innerText = sub;
		a.innerText = '展开';
	}else{
		span.innerText = str;
		a.innerText = '收缩';
	}
	//改变开关的值。
	onoff = !onoff;
}