html点击按钮 回到低部,点击一个按钮触发动画，再点击回到初始状态(JS)

开发中，经常会碰到类似侧边栏的效果，有一个按钮，点击可以展开，再点击就收回。其实这个动画非常简单。

收起正文

• 保存

• 预览

• 保存并提交

这里，我想点击收起正文，会缩小编辑器的高度，再点击就还原默认。

先来看看JS的写法:

收起正文 //我们只对HTML中的这一部分代码做一些操作

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()';

}

这里的'#hidden'指的是编辑器的ID，我需要改变它的原有高度。虽然代码看起来比较繁琐，但是比较容易理解。