赞助商成为赞助商
- 开始使用
- 事件
- 路由器 / 导航
- 存储
- 组件
- 应用程序 / 核心
- 手风琴 / 可折叠
- 操作表 / 操作
- 面积图
- 自动完成
- 徽章
- 块 / 内容块
- 面包屑导航
- 按钮
- 日历 / 日期选择器
- 卡片
- 复选框
- 芯片 / 标签
- 颜色选择器
- 联系人列表
- 数据表
- 对话框
- 浮动操作按钮 / FAB
- 表单数据 / 存储
- 仪表盘
- 网格 / 布局网格
- 图标
- 无限滚动
- 输入框 / 表单输入
- 链接
- 列表按钮
- 列表视图
- 列表索引
- 登录屏幕
- 菜单列表
- 消息栏
- 消息
- 导航栏
- 通知
- 页面
- 面板 / 侧边面板
- 图片浏览器
- 选择器
- 饼图
- 弹出窗口
- 弹出层
- 预加载器
- 进度条
- 下拉刷新
- 单选按钮
- 范围滑块
- 搜索栏
- 分段控件
- 模态表单
- 骨架屏
- 智能选择
- 可排序列表
- 状态栏
- 步进器
- 子导航栏
- 滑出删除
- Swiper
- 标签页
- 文本编辑器
- 时间线
- 吐司提示
- 切换按钮
- 工具栏 / 标签栏
- 工具提示
- 树形视图
- 视图 / 路由器
- 虚拟列表
- Framework7 图标
- 样式
- Dom7
- 触摸实用程序
- 实用程序
- 插件 API
- 懒加载模块
- 自定义构建
手风琴 / 可折叠
手风琴布局
常见的手风琴布局可以视为以下内容
<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-opened">
<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- 手风琴项集列表。可选类accordion-item- 单个折叠面板项。 必需accordion-item-toggle- 用于展开/折叠折叠面板项内容的链接。 必需accordion-item-content- 隐藏的折叠面板项内容。 必需
accordion-item-opened- 单个已打开的折叠面板项
可折叠布局
如果要使用单个独立的可折叠元素，则可以省略 "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 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>反向折叠面板
要在相反侧（在 LTR 中为左侧）渲染折叠面板 V 形图标，需要向折叠面板容器或折叠面板列表添加额外的 accordion-opposite 类
<!-- Accordion opposite -->
<div class="accordion-list accordion-opposite">
<div class="accordion-item">
<div class="accordion-item-toggle">...</div>
<div class="accordion-item-content">...</div>
</div>
<div class="accordion-item accordion-item-opened">
<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 opposite -->
<div class="list accordion-list accordion-opposite">
<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>示例
accordion.html
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="title">Accordion</div>
</div>
</div>
<div class="page-content">
<div class="block-title">List View Accordion</div>
<div class="list list-strong list-outline-ios list-dividers-ios inset-md accordion-list">
<ul>
<li class="accordion-item">
<a class="item-link item-content">
<div class="item-inner">
<div class="item-title">Lorem Ipsum</div>
</div>
</a>
<div class="accordion-item-content">
<div class="block">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel
justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor
vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis
viverra blandit suscipit eget ipsum.
</p>
</div>
</div>
</li>
<li class="accordion-item">
<a class="item-link item-content">
<div class="item-inner">
<div class="item-title">Nested List</div>
</div>
</a>
<div class="accordion-item-content">
<div class="list">
<ul>
<li>
<div class="item-content">
<div class="item-media"> <i class="icon icon-f7"></i>
</div>
<div class="item-inner">
<div class="item-title">Item 1</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"> <i class="icon icon-f7"></i>
</div>
<div class="item-inner">
<div class="item-title">Item 2</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media">
<i class="icon icon-f7"></i>
</div>
<div class="item-inner">
<div class="item-title">Item 3</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media">
<i class="icon icon-f7"></i>
</div>
<div class="item-inner">
<div class="item-title">Item 4</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
<li class="accordion-item">
<a class="item-link item-content">
<div class="item-inner">
<div class="item-title">Integer semper</div>
</div>
</a>
<div class="accordion-item-content">
<div class="block">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel
justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor
vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis
viverra blandit suscipit eget ipsum.
</p>
</div>
</div>
</li>
</ul>
</div>
<div class="block-title">Opposite Side</div>
<div class="list list-strong list-outline-ios list-dividers-ios inset-md accordion-opposite accordion-list">
<ul>
<li class="accordion-item">
<a class="item-link item-content">
<div class="item-inner">
<div class="item-title">Lorem Ipsum</div>
</div>
</a>
<div class="accordion-item-content">
<div class="block">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel
justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor
vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis
viverra blandit suscipit eget ipsum.
</p>
</div>
</div>
</li>
<li class="accordion-item">
<a class="item-link item-content">
<div class="item-inner">
<div class="item-title">Nested List</div>
</div>
</a>
<div class="accordion-item-content">
<div class="list">
<ul>
<li>
<div class="item-content">
<div class="item-media"> <i class="icon icon-f7"></i>
</div>
<div class="item-inner">
<div class="item-title">Item 1</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"> <i class="icon icon-f7"></i>
</div>
<div class="item-inner">
<div class="item-title">Item 2</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media">
<i class="icon icon-f7"></i>
</div>
<div class="item-inner">
<div class="item-title">Item 3</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media">
<i class="icon icon-f7"></i>
</div>
<div class="item-inner">
<div class="item-title">Item 4</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
<li class="accordion-item">
<a class="item-link item-content">
<div class="item-inner">
<div class="item-title">Integer semper</div>
</div>
</a>
<div class="accordion-item-content">
<div class="block">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel
justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor
vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis
viverra blandit suscipit eget ipsum.
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>折叠面板应用程序方法
折叠面板还有一个 JavaScript API，允许您以编程方式打开和关闭它们。 让我们看看一些折叠面板应用程序方法
app.accordion.open(item) - 打开指定的折叠面板项
- item - HTMLElement 或 string （带 CSS 选择器）的折叠面板项元素 (<div class="accordion-item">)。 必需
app.accordion.close(item) - 关闭指定的折叠面板项
- item - HTMLElement 或 string （带 CSS 选择器）的折叠面板项元素 (<div class="accordion-item">)。 必需
app.accordion.toggle(item) - 切换指定的折叠面板项
- item - HTMLElement 或 string （带 CSS 选择器）的折叠面板项元素 (<div class="accordion-item">)。 必需
折叠面板事件
折叠面板将在折叠面板项上触发以下 DOM 事件，并在应用程序实例上触发应用程序事件
DOM 事件
| 事件 | 目标 | 描述 |
|---|---|---|
| accordion:beforeopen | 折叠面板项<div class="accordion-item"> | 事件将在折叠面板内容开始其打开动画之前触发。 event.detail.prevent 包含一个函数，该函数将在调用时阻止折叠面板打开 |
| accordion:open | 折叠面板项<div class="accordion-item"> | 事件将在折叠面板内容开始其打开动画时触发 |
| accordion:opened | 折叠面板项<div class="accordion-item"> | 事件将在折叠面板内容完成其打开动画后触发 |
| accordion:beforeclose | 折叠面板项<div class="accordion-item"> | 事件将在折叠面板内容开始其关闭动画之前触发。 event.detail.prevent 包含一个函数，该函数将在调用时阻止折叠面板关闭 |
| accordion:close | 折叠面板项<div class="accordion-item"> | 事件将在折叠面板内容开始其关闭动画时触发 |
| accordion:closed | 折叠面板项<div class="accordion-item"> | 事件将在折叠面板内容完成其关闭动画后触发 |
应用事件
| 事件 | 参数 | 描述 |
|---|---|---|
| accordionBeforeOpen | (el, prevent) | 事件将在折叠面板内容开始其打开动画之前触发。 prevent 包含一个函数，该函数将在调用时阻止折叠面板打开 |
| accordionOpen | (el) | 事件将在折叠面板内容开始其打开动画时触发 |
| accordionOpened | (el) | 事件将在折叠面板内容完成其打开动画后触发 |
| accordionBeforeClose | (el, prevent) | 事件将在折叠面板内容开始其关闭动画之前触发。 prevent 包含一个函数，该函数将在调用时阻止折叠面板关闭 |
| accordionClose | (el) | 事件将在折叠面板内容开始其关闭动画时触发 |
| accordionClosed | (el) | 事件将在折叠面板内容完成其关闭动画后触发 |
var app = new Framework7();
var $ = Dom7;
$('.accordion-item').on('accordion:opened', function () {
app.dialog.alert('Accordion item opened');
});
$('.accordion-item').on('accordion:closed', function (e) {
app.dialog.alert('Accordion item closed');
});
app.on('accordionOpened', function (el) {
console.log('The following element opened:');
console.log(el);
});