JS/CSS 手风琴动画效果

JS/CSS 手风琴动画效果
1.class获取、添加删除状态切换
a.获取：事件触发后，通过this.xxx来获取需要元素；
b.添加、删除以及状态切换：此时操作的对象为CSS样式中的.class，通过添加、删除以及状态切换来改变元素状态。
2..nextElementSibling：获取下一个元素。
3..scrollHeight：
a. clientHeight：元素客户区的大小，指的是元素内容及其边框所占据的空间大小（经过实践取出来的大多是视口大小）；
b. scrollHeight: 滚动大小，指的是包含滚动内容的元素大小（元素内容的总高度）；
c. offsetHeight: 偏移量，包含元素在屏幕上所用的所有可见空间（包括所有的内边距滚动条和边框大小，不包括外边距；
需要注意的是在修改元素高度时，注意添加度的单位，如panel.style.maxHeight = panel.scrollHeight + "px";