在微信上关注我们
The collapse component can be used to make dropdown and accordion.
To create an accordion, use Panel with following classes in collapse:
.am-collapse to hide contents;.am-collapse.am-in to show contents;Use Data API after adding above classes:
<h4 data-am-collapse="{parent: '#accordion', target: '#do-not-say-1'}"></h4>Where
parent is the container IDtarget is the content container IDIf the trigger element is <a>, target can be set in href.
<a data-am-collapse="{parent: '#accordion'}" href="#do-not-say-1">
...
</a><a data-am-collapse="{parent: '#accordion'}" href="#do-not-say-1">
...
</a>Please be aware of there is a nav container outside the target element, which is used to calculate the height of menu.
<button class="am-btn am-btn-primary" data-am-collapse="{target: '#collapse-nav'}">Menu <i class="am-icon-bars"></i></button>
<nav>
<ul id="collapse-nav" class="am-nav am-collapse">
<li><a href="">Getting Started</a></li>
<li><a href="">CSS</a></li>
<li class="am-active"><a href="">JS</a></li>
<li><a href="">Customize</a></li>
</ul>
</nav>Add data-am-collapse attribute to element and set the value of target to the ID of collapse element:
<button data-am-collapse="{target: '#my-collapse'}"></button>$('#myCollapse').collapse()$().collapse(options) - Expand/Collapse target element$('#myCollapse').collapse({
toggle: false
})$().collapse('toggle') - Switch the panel state$().collapse('open') - Expand the panel$().collapse('close') - Collapse the panel| Parameter | Type | Default | Description |
|---|---|---|---|
parent | Selector | false | If a parent selector is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. |
toggle | boolean | true | Toggles the collapsible element on invocation |
Some events are defined in collapse and can be triggered on collapse element. Using the dropdown menu as example:
$(function() {
$('#collapse-nav').on('open.collapse.amui', function() {
console.log('Menu is opened!');
}).on('close.collapse.amui', function() {
console.log('Menu is closed!');
});
});| Event | Description |
|---|---|
open.collapse.amui | This event fires when open method get called |
opened.collapse.amui | This event fires when a collapse element is fully opend (will wait for CSS transitions to complete). |
close.collapse.amui | This event fires when close method get called |
closed.collapse.amui | This event fires when a collapse element is fully closed (will wait for CSS transitions to complete). |
Don't use vertical margin/padding/border in container of collapse element.
Because of the way jQuery calculate the heights of elements, styles can go wrong if margin/padding/border is added to container.