Framework7 - Accordion

Framework7手风琴 - 从概述，环境，布局，导航栏，工具栏，搜索栏，状态栏，侧面板，内容块，布局网格，叠加层，预加载器，进度条，列表视图，手风琴，卡片，芯片，按钮开始学习Framework7动作按钮，表单，选项卡，Swiper滑块，照片浏览器，自动完成，选择器，日历，刷新，无限滚动，消息，消息栏，通知，延迟加载，颜色主题，细线，模板概述，自动编译，Template7页面，活动状态，点按保持事件，触摸波纹。

描述

手风琴是一个图形控制元素，显示为堆叠的项目列表.每个手风琴都可以扩展或拉伸以显示与该手风琴相关的内容.

可折叠布局

当您使用单个单独的可折叠元素时，您需要省略 accordion-list 包装元素.

以下是可折叠布局的结构 : ;

以下类用于Framework7中的accordion :

S.No	Classes&说明
1	accordion-list 这是一个可选的类，它包含一组手风琴项列表.
2	accordion-item 这是单手风琴项的必需类.
3	accordion-item-toggle 这是用于扩展手风琴项目内容的必需类.
4	accordion-item-content 这是隐藏的手风琴项目内容所需的类.
5	accordion-item-expanded 这是一个扩展的手风琴项目.

Accordion JavaScript API

JavaScript API方法用于以编程方式打开和关闭手风琴.

它包含以下JavaScript API方法 :

myApp.accordionOpen(项目) : 用于打开手风琴.
myApp.accordionClose(item) : 用于关闭手风琴.
myApp.accordionToggle(item) : 用于切换手风琴.

所有方法都包含名为 item 的参数，它是HTML或手风琴的字符串元素 - item.

手风琴活动

Accordion包含下表中列出的四个事件 :

S.No	事件	目标&说明
1	打开	手风琴项目当您打开动画时，此事件将被触发.
2	已打开	手风琴项目当动画开始时，此事件将被解雇.
3	关闭	手风琴项目关闭动画时，此事件将被触发.
4	已关闭	手风琴项目动画关闭完成后，此事件将被解雇.

手风琴列表视图

在手风琴列表视图中，您可以使用 item-link 元素代替 accordion-toggle .

                                             1st Item                              Content for 1st Item...                                                      2nd Item                              Content for 2nd Item...

示例

以下示例演示了在Framework7中使用accordion :

                           Accordion                                                                                                                                                    Accordion                                                                                                       List of Programming Lagauges                                                                                                                                                                           C                                                                                                                                                                  C is a general-purpose, procedural, imperative computer programming language developed in 1972 by Dennis M. Ritchie at the Bell Telephone Laboratories to develop the UNIX operating system. C is the most widely used computer language. It keeps fluctuating at number one scale of popularity along with Java programming language, which is also equally popular and most widely used among modern software programmers.
                                                                                                                                                                                                                        C++                                                                                                                                                                  C++ is a middle-level programming language developed by Bjarne Stroustrup starting in 1979 at Bell Labs. C++ runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX.                                       This reference will take you through simple and practical approach while learning C++ Programming language.                                    
                                                                                                                                                                                                                        Java                                                                                                                                                                  Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.                                       This reference will take you through simple and practical approach while learning Java Programming language.                                    
                                                                                                                  
                                          Separate Collapsibles                                                                                                                                                                           C                                                                                                                                                                  C is a general-purpose, procedural, imperative computer programming language developed in 1972 by Dennis M. Ritchie at the Bell Telephone Laboratories to develop the UNIX operating system. C is the most widely used computer language. It keeps fluctuating at number one scale of popularity along with Java programming language, which is also equally popular and most widely used among modern software programmers.
                                                                                                                                                                                                                        C++                                                                                                                                                                  C++ is a middle-level programming language developed by Bjarne Stroustrup starting in 1979 at Bell Labs. C++ runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX.                                       This reference will take you through simple and practical approach while learning C++ Programming language.                                    
                                                                                                                                                                                                                        Java                                                                                                                                                                  Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.                                       This reference will take you through simple and practical approach while learning Java Programming language.                                    
                                                                                                                  
                                          Custom Accordion                                                                        +-C                                                         C is a general-purpose, procedural, imperative computer programming language developed in 1972 by Dennis M. Ritchie at the Bell Telephone Laboratories to develop the UNIX operating system. C is the most widely used computer language. It keeps fluctuating at number one scale of popularity along with Java programming language, which is also equally popular and most widely used among modern software programmers.
                                                                                                      +-C++                                                         C++ is a middle-level programming language developed by Bjarne Stroustrup starting in 1979 at Bell Labs. C++ runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX.                                 This reference will take you through simple and practical approach while learning C++ Programming language.                              
                                                                                                      +-Java                                                         Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.                                 This reference will take you through simple and practical approach while learning Java Programming language.

输出

让我们执行以下步骤，看看上面给出的代码如何工作 : 去;

将上面给出的HTML代码保存为服务器根文件夹中的 accordion.html 文件.
将此HTML文件打开为http://localhost/accordion.html，输出显示如下.
该示例提供了可折叠布局，可以展开以显示与手风琴相关联的内容.