手风琴布局/可折叠布局(Accordion / Collapsible)
优质
小牛编辑
136浏览
2023-12-01
手风琴布局Accordion Layout
通常,手风琴布局可以这样实现:
<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
- 多个手风琴元素的列表. 可选accordion-item
- 单个手风琴元素. 必选accordion-item-toggle
- 用来展开/折叠手风琴元素内容的开关. 必选accordion-item-content
- 隐藏的手风琴元素的内容. 必选
accordion-item-expanded
- 展开的手风琴元素
折叠布局(Collapsible Layout)
如果你希望独立的可折叠元素,你可以不使用"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>
手风琴列表视图(Accordion List View)
如果你希望给列表视图加上手风琴布局,你应该使用"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>
示例
<!-- List View -->
<div class="content-block-title">List View Accordion</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">Item 1</div>
</div></a>
<div class="accordion-item-content">
<div class="content-block">
<p>Item 1 content. Lorem ipsum dolor sit amet...</p>
</div>
</div>
</li>
<li class="accordion-item"><a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">Item 2</div>
</div></a>
<div class="accordion-item-content">
<div class="content-block">
<p>Item 2 content. Lorem ipsum dolor sit amet...</p>
</div>
</div>
</li>
...
</ul>
</div>
<!-- Separate collapsibles - omit "accordion-list" class-->
<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">Item 1</div>
</div></a>
<div class="accordion-item-content">
<div class="content-block">
<p>Item 1 content. Lorem ipsum dolor sit amet...</p>
</div>
</div>
</li>
<li class="accordion-item"><a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">Item 2</div>
</div></a>
<div class="accordion-item-content">
<div class="content-block">
<p>Item 2 content. Lorem ipsum dolor sit amet...</p>
</div>
</div>
</li>
...
</ul>
</div>
<!-- Custom Accordion -->
<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>Item 1</span>
</div>
<div class="accordion-item-content">
<p>Item 1 content. Lorem ipsum dolor sit amet...</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>Item 2</span>
</div>
<div class="accordion-item-content">
<p>Item 2 content. Lorem ipsum dolor sit amet...</p>
</div>
</div>
...
</div>
JavaScript API
手风琴组件有JavaScript API,你可以在JS中控制打开和关闭。方法说明如下:
myApp.accordionOpen(item) - 打开指定的条目
- item - HTMLElement or string (想要操作的条目的CSS选择器 (<div class="accordion-item">). 必须。
myApp.accordionClose(item) - 关闭指定条目
- item - HTMLElement or string (想要操作的条目的CSS选择器 (<div class="accordion-item">). 必须
myApp.accordionToggle(item) - toggle 指定条目
- item - HTMLElement or string (想要操作的条目的CSS选择器 (<div class="accordion-item">). Required
事件
手风琴有这些事件:
事件名称 | Target | 说明 |
---|---|---|
open | Accordion item<div class="accordion-item"> | 某一条目开始执行打开动画的时候会触发 |
opened | Accordion item<div class="accordion-item"> | 某一条目完成打开动画后触发 |
close | Accordion item<div class="accordion-item"> | 某一条目开始执行关闭动画的时候会触发 |
closed | Accordion item<div class="accordion-item"> | 某一条目完成关闭动画后触发 |
var myApp = new Framework7();
var $$ = Dom7;
$$('.accordion-item').on('opened', function () {
myApp.alert('Accordion item opened');
});
$$('.accordion-item').on('closed', function (e) {
myApp.alert('Accordion item closed');
});