折叠面板的改进【Amaze UI】

折叠面板或者说折叠列表在移动端的使用非常广泛，不仅可以让页面渲染地更简洁，而且使用起来也是很大方，很实用。在做项目的过程中，我应用到了这个功能，进行了改进并应用，接下来详细讲解。

结果展示：

html页面代码：

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    



    

        
            
            首页
        
    

    

        
             前端开发
            
        
        

            
 JavaScript 
            
 jQuery 
            
 HTML5 
        
    

    

        //这个target指向的是折叠面板中的id
             后台开发
            
        
        
//id的名字与前面的target是一样的
            
 Python 
            
 PHP 
            
 J2EE 
        
    

    

        
             数据库
            
        
        

            
 MySQL 
            
 NoSQL
        
    

改进：

我把右边“<”的图标进行了修改，希望能够在点击的时候变成“^”，然后再点击收回的时候又变回原来的图标。

所以我自己写了一段js代码，我为了方便，对每个单独的折叠进行了修改，到后面可以进行整合，不用单独分开写。

其中涉及到的方法在Amaze UI的官网上也能够看到。

事件	描述
open.collapse.amui	open 方法被调用时立即触发
opened.collapse.amui	元素完全展开后触发
close.collapse.amui	close 方法被调用后立即触发
closed.collapse.amui	元素折叠完成后触发