本文概述

• Accordion布局
• 可折叠布局
• Accordion列表视图
• Framework7中用于Accordion的类
• 适用于Accordion的JavaScript API
• Accordion活动

Framework7 Accordion是图形控件元素, 显示为堆叠的项目列表。你可以展开或折叠Accordion以显示与该Accordion关联的内容。
Accordion布局 查看Accordion布局如何：

< div class="accordion-list"> < div class="accordion-item"> < div class="accordion-item-toggle"> ...< /div> < div class="accordion-item-content"> ...< /div> < /div> < div class="accordion-item accordion-item-expanded"> < div class="accordion-item-toggle"> ...< /div> < div class="accordion-item-content"> ...< /div> < /div> < div class="accordion-item"> < div class="accordion-item-toggle"> ...< /div> < div class="accordion-item-content"> ...< /div> < /div> ...< /div>

可折叠布局 当使用单个单独的可折叠元素时, 你需要省略可折叠列表包装元素。
查看可折叠布局的结构：

< !-- Single collapsible element --> < div class="accordion-item"> < div class="accordion-item-toggle"> ...< /div> < div class="accordion-item-content"> ...< /div> < /div> < !-- Another separate collapsible element --> < div class="accordion-item"> < div class="accordion-item-toggle"> ...< /div> < div class="accordion-item-content"> ...< /div> < /div>

Accordion列表视图 如果要设置Accordion列表视图, 请使用“ item-link”元素而不是“ accordion-toggle”。

< div class="list-block accordion-list"> < ul> < li class="accordion-item"> < a href="" class="item-link item-content"> < div class="item-inner"> < div class="item-title"> Item 1< /div> < /div> < /a> < div class="accordion-item-content"> Item 1 content ...< /div> < /li> < li class="accordion-item"> < a href="" class="item-link item-content"> < div class="item-inner"> < div class="item-title"> Item 2< /div> < /div> < /a> < div class="accordion-item-content"> Item 2 content ...< /div> < /li> < /ul> < /div>

Framework7中用于Accordion的类 以下是Framework7中用于Accordion的类的列表：

指数	类	描述
1)	accordion-list	这是一个类, 其中包含一组Accordion项目列表。它是可选的。
2)	accordion-item	这是单个Accordion项目的必修课。
3)	accordion-item-toggle	它是用于扩展Accordion项目内容的必需类。
4)	accordion-item-content	这是用于隐藏Accordion项目内容的必需类。
5)	accordion-item-expanded	这是一个扩展的Accordion产品。

适用于Accordion的JavaScript API JavaScript API是用于以编程方式打开和关闭Accordion的方法。有3种JavaScript API方法：

• myApp.accordionOpen（item）：用于打开Accordion。
• myApp.accordionClose（item）：用于关闭Accordion。
• myApp.accordionToggle（item）：用于切换Accordion。

Accordion活动 在Framework7中为“Accordion”列出了4个事件：

指数	事件	描述
1)	open	打开动画时将触发此事件。
2)	opened	动画的打开完成时将触发此事件。
3)	close	关闭动画时将触发此事件。
4)	closed	动画关闭完成时将触发此事件。

例

< !DOCTYPE html> < html> < head> < meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> < meta name="apple-mobile-web-app-capable" content="yes"> < meta name="apple-mobile-web-app-status-bar-style" content="black"> < title> Accordion< /title> < link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css"> < link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css"> < /head> < body> < div class="views"> < div class="view view-main"> < div class="pages"> < div data-page="home" class="page navbar-fixed"> < div class="navbar"> < div class="navbar-inner"> < div class="left"> < /div> < div class="center"> Accordion< /div> < div class="right"> < /div> < /div> < /div> < div class="page-content"> < div class="content-block-title"> Programming Lagauges< /div> < div class="list-block accordion-list"> < ul> < li class="accordion-item"> < a href="http://www.srcmini.com/#" class="item-content item-link"> < div class="item-inner"> < div class="item-title"> C< /div> < /div> < /a> < div class="accordion-item-content"> < div class="content-block"> < p> 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.< /p> < /div> < /div> < /li> < li class="accordion-item"> < a href="http://www.srcmini.com/#" class="item-content item-link"> < div class="item-inner"> < div class="item-title"> C++< /div> < /div> < /a> < div class="accordion-item-content"> < div class="content-block"> < p> 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.< /p> < /div> < /div> < /li> < li class="accordion-item"> < a href="http://www.srcmini.com/#" class="item-content item-link"> < div class="item-inner"> < div class="item-title"> Java< /div> < /div> < /a> < div class="accordion-item-content"> < div class="content-block"> < p> 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.< /p> < /div> < /div> < /li> < /ul> < /div> < div class="content-block-title"> Separate Collapsibles< /div> < div class="list-block"> < ul> < li class="accordion-item"> < a href="http://www.srcmini.com/#" class="item-content item-link"> < div class="item-inner"> < div class="item-title"> C< /div> < /div> < /a> < div class="accordion-item-content"> < div class="content-block"> < p > 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.< /p> < /div> < /div> < /li> < li class="accordion-item"> < a href="http://www.srcmini.com/#" class="item-content item-link"> < div class="item-inner"> < div class="item-title"> C++< /div> < /div> < /a> < div class="accordion-item-content"> < div class="content-block"> < p> 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.< /p> < /div> < /div> < /li> < li class="accordion-item"> < a href="http://www.srcmini.com/#" class="item-content item-link"> < div class="item-inner"> < div class="item-title"> Java< /div> < /div> < /a> < div class="accordion-item-content"> < div class="content-block"> < p> 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.< /p> < /div> < /div> < /li> < /ul> < /div> < div class="content-block-title"> Custom Accordion< /div> < div class="content-block accordion-list custom-accordion"> < div class="accordion-item"> < div class="accordion-item-toggle"> < i class="icon icon-plus"> +< /i> < i class="icon icon-minus"> -< /i> < span> C< /span> < /div> < div class="accordion-item-content"> < p> 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 mostwidely 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.< /p> < /div> < /div> < div class="accordion-item"> < div class="accordion-item-toggle"> < i class="icon icon-plus"> +< /i> < i class="icon icon-minus"> -< /i> < span> C++< /span> < /div> < div class="accordion-item-content"> < p> 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.< /p> < /div> < /div> < div class="accordion-item"> < div class="accordion-item-toggle"> < i class="icon icon-plus"> +< /i> < i class="icon icon-minus"> -< /i> < span> Java< /span> < /div> < div class="accordion-item-content"> < p> 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.< /p> < /div> < /div> < /div> < /div> < /div> < /div> < /div> < /div> < script type="text/javascript" src="http://img.readke.com/220423/043633LD-0.jpg"> < /script> < style> .custom-accordion{padding-left:0; padding-right:0; }.custom-accordion .accordion-item-toggle{padding:0px 15px; height:44px; line-height:44px; font-size:17px; color:#000; border-bottom:1px solid rgba(0, 0, 0, 0.15); cursor:pointer; }.custom-accordion .accordion-item-toggle:active{background:rgba(0, 0, 0, 0.15); }.custom-accordion .accordion-item-toggle span{display:inline-block; margin-left:15px; }.custom-accordion .accordion-item:last-child .accordion-item-toggle{border-bottom:none; }.custom-accordion .icon-plus, .custom-accordion .icon-minus{display:inline-block; width:22px; height:22px; border:1px solid #000; border-radius:100%; line-height:20px; text-align:center; }.custom-accordion .icon-minus{display:none; }.custom-accordion .accordion-item-expanded .icon-minus{display:inline-block; }.custom-accordion .accordion-item-expanded .icon-plus{display:none; }.custom-accordion .accordion-item-content{padding:0px 15px; }< /style> < script> // here initialize the appvar myApp = new Framework7(); // If your using custom DOM library, then save it to $$ variablevar $$ = Dom7; // Add the viewvar mainView = myApp.addView('.view-main', {// enable the dynamic navbar for this view:dynamicNavbar: true}); < /script> < /body> < /html>

立即测试
【Framework7手风琴/可折叠Accordion布局】输出：

文章图片

推荐阅读

• 

  信号工证怎么查询 信号工证查询步骤
• 

  佳能ts208打印机清零
• 

  抽血后容易疲劳是怎么回事
• 

  济南摄影活动 济南延时摄影
• 

  你了解Win7文件夹高级权限设置吗
• 

  鲤鱼汤的做法 鲤鱼汤的做法简介
• 

  纵观国内娱乐圈,你觉得需要整顿吗？
• 

  橙子会让皮肤变黄吗
• 

  送给好朋友短信生日祝福语
• 

  冻梨可以用热水泡吗
• 

  学考过不了能上大学吗
• 

  荷兰豆|“荷兰豆”并非产自荷兰
• 

  你好，宝宝二十天了小儿脐风散误食了一袋的量，因该怎么处理……谢谢
• 

  第五人格印记怎么开启 第五人格印记怎么开启不了
• 

  如何让宫口开得快
• 

  手机电池里的液体弄手上了？有危险吗？
• 

  脑梗|半年被脑梗“偷袭”两次，和早晨常做几件事，脱不了干系
• 

  公务员职位中法检系统中招录的法律类一级科员是什么？和四级检察官助理,法官助理有什么区别？
• 

  猎豹浏览器怎么设置兼容模式？兼容模式设置方法详解
• 

  郫县豆瓣史话