仿制element-ui的Collapse 折叠面板组件

几天没有更新博客了，最近有点忙，没时间写博客，今天偷下懒，写写博客。

废话也不多说，说正题，这个折叠面板组件的实现使用了transition过渡动画和css3的变量，使用原生的JS实现逻辑，用到部分ES6的语法，现在本人也还没搞得太透彻，理解明白了，会写一些关于ES7及其更新的语法的博客。

这是效果图：

这个控件比较简单，我就直接上代码了，不明白的朋友可以在评论里留言，我会改进的；或者是有大神指点我一二，让我进步我也很高兴。

代码如下：

	
	



	
	

		

			

				
一致性 Consistency
				

					
				
			
			

				与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
				在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
			
		
		

			

				
反馈 Feedback
				

					
				
			
			

				控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
				页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
			
		
		

			

				
效率 Efficiency
				

					
				
			
			

				简化流程：设计简洁直观的操作流程；
				清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
				帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
			
		
		

			

				
可控 Controllability
				

					
				
			
			

				用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
				结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
			
		
	

如果您有更好的建议欢迎给我评论留言，谢谢！