如何使用 jQuery EasyUI Mobile 设计手风琴？

EasyUI是一个 HTML5 框架，用于使用基于 jQuery、React、Angular 和 Vue 技术的用户界面组件。它有助于为交互式 Web 和移动应用程序构建功能，为开发人员节省大量时间。手风琴是在显示和隐藏之间切换的 HTML 内容。

jQuery EasyUI 框架的下载链接：

https://www.jeasyui.com/download/index.php

请下载以下代码实现的所有预编译文件，并注意正确的文件路径。

示例 1：下面的示例演示了使用 jQuery EasyUI框架的基本手风琴。它有显示和隐藏两个内容。一个是一个列表，第二个列表显示它的内容，就像从另一个名为“mycontent.html”的 HTML 文件加载 Ajax 一样。

HTML

  

    
    
  
    
    
    
  
    
    
    

  

    
        
            
                
                    My Accordion
                
            
        
  
        
  
            
                
                    Algorithms
                    Data Structures
                    Web designing
                    More...
                
            
  
            
            
        
    

  

“mycontent.html”文件：以下文件用于数据内容的 Ajax 加载示例中。

HTML

  

    
My AJAX content.
  
  
    

        

            There are many important things that 
            should be taken care of, like user 
            friendliness, modularity, security, 
            maintainability, etc.
        
          
        

            Python is a high-level, general-purpose 
            and a very popular programming language.
        
          
        

            Java has been one of the most popular 
            programming language for many years.
        
          
        

            The Java codes are first compiled into 
            byte code (machine independent code). 
        
          
        

            Java is used in all kind of applications
            like Mobile Applications (Android is 
            Java based).
        
          
        

            When compared with C++, Java codes are 
            generally more maintainable because Java 
            does not allow many things which may lead
            bad/inefficient programming if used 
            incorrectly.
        
    

  

输出：

示例 2：以下示例演示了使用 jQuery EasyUI Mobile 插件的自定义手风琴标题。

HTML

  

    
    
  
    
    
    
  
    
    
    
    
    
    
    
     
        .ajax-list {
            padding: 5px;
            position: relative;
            line-height: 20px;
            background: #fff;
            font-weight: bold;
            margin: -5px;
        }
    

  

    
        
  
            
            
                
                    My Custom Header
                
            
        
        
            
                
                    
                        List 1
                        
                            27/50
                        
                    
                
                
                    Web design
                    Mobile Apps
                    Tableau
                    More...
                
            
  
            
            
                
                    
                        List 2
                        
                            
                                Ajax Loading
                            
                            25
                        
                    
                
            
        
    

  

输出：