Framework7 手风琴/折叠

17 Mar 2025 | 5 分钟阅读

Framework7 手风琴是一个图形控件，以堆叠的列表项形式显示。您可以展开或折叠手风琴以显示与该手风琴关联的内容。

手风琴布局

查看手风琴布局的呈现方式

<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>  

折叠布局

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

查看折叠布局的结构

<!-- 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>

手风琴列表视图

如果要设置手风琴列表视图，请使用 "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 中用于手风琴的类

以下是 Framework7 中用于手风琴的类列表

索引	Class	描述
1)	accordion-list	它是一个包含一组手风琴项目列表的类。它是可选的。
2)	accordion-item	它是单个手风琴项目的必需类。
3)	accordion-item-toggle	它是用于展开手风琴项目内容的必需类。
4)	accordion-item-content	它是用于隐藏手风琴项目内容的必需类。
5)	accordion-item-expanded	它是一个已展开的单个手风琴项目。

手风琴的 JavaScript API

JavaScript API 是用于以编程方式打开和关闭手风琴的方法。有 3 个 JavaScript API 方法

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

手风琴事件

Framework7 中列出了 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="#" 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="#" 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="#" 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="#" 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="#" 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="#" 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 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>
                        <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="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></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 app
         var myApp = new Framework7();

         // If your using custom DOM library, then save it to $$ variable
         var $$ = Dom7;

         // Add the view
         var mainView = myApp.addView('.view-main', {
            // enable the dynamic navbar for this view:
            dynamicNavbar: true
         });
      </script>
   </body>
</html>

立即测试

输出

下一主题Framework7 卡片

Framework7 手风琴/折叠

手风琴布局

折叠布局

手风琴列表视图

Framework7 中用于手风琴的类

手风琴的 JavaScript API

手风琴事件

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Framework7 教程

Framework7 表单

Framework7 选项卡

F7 Swiper 滑块

F7 图片浏览器

F7 选择器

F7 日历

F7 杂项

面试题

Framework7 手风琴/折叠

手风琴布局

折叠布局

手风琴列表视图

Framework7 中用于手风琴的类

手风琴的 JavaScript API

手风琴事件

示例

相关帖子

F7 预加载器

F7 芯片

F7 覆盖层

Framework7 教程

F7 操作按钮

F7 导航栏

F7 进度条

Framework7 安装

F7 卡片

F7 布局

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器