开发中，经常会碰到类似侧边栏的效果，有一个按钮，点击可以展开，再点击就收回。其实这个动画非常简单。
<div class="footer-bar ">
<div class="container">
<a id="changeChar" href="javascript:hiddenArticle()">
<span class="glyphicon glyphicon-plus" aria-hidden="true">收起正文</span>
</a>
<ul class="list-unstyled list-inline">
<li>
<button type="button" class="btn btn-success btn-style" id="submitSave">保存</button>
</li>
<li>
<button type="button" class="btn btn-default btn-style" id="phone">预览</button>
</li>
<li>
<button type="button" class="btn btn-default btn-style" id="tijiao">保存并提交</button>
</li>
</ul>
</div>
</div>
这里，我想点击收起正文，会缩小编辑器的高度，再点击就还原默认。
先来看看JS的写法:
<a id='change' href='javascript:hiddenArticle()'>收起正文</a> //我们只对HTML中的这一部分代码做一些操作
<script>
function hiddenArticle(){
document.getElementById('change').innerHTML = '展开正文';
document.getElementById('hidden').style.height = '150px';
document.getElementById('hidden').style.overflow = 'hidden';
document.getElementById('change').href = 'javascript:blockArticle()';
}
function blockArticle(){
document.getElementById('change').innerHTML = '收起正文';
document.getElementById('hidden').style.height = '';
document.getElementById('change').href = 'javascript:hiddenArticle()';
}
</script>
这里的'#hidden'指的是编辑器的ID，我需要改变它的原有高度。虽然代码看起来比较繁琐，但是比较容易理解。
