ui:collapse

Indicates that a menu component collapses.

For example, the ui:menuList component registers this event and handles it when it’s fired.

1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<aura:registerEvent name="menuCollapse"  type="ui:collapse"
18                    description="The event fired when the menu list collapses." />

You can handle this event in a ui:menuList component instance. This example shows a menu component with two list items. It handles the ui:collapse and ui:expand events.

1<ui:menu>
2    <ui:menuTriggerLink aura:id="trigger" label="Contacts"/>
3        <ui:menuList class="actionMenu" aura:id="actionMenu" menuCollapse="{!c.addClass}" menuExpand="{!c.removeClass}">
4            <ui:actionMenuItem aura:id="item1" label="All Contacts" click="{!c.doSomething}"/>
5            <ui:actionMenuItem aura:id="item2" label="All Primary" click="{!c.doSomething}"/>
6        </ui:menuList>
7</ui:menu>

This client-side controller adds a CSS class to the trigger when the menu is collapsed and removes it when the menu is expanded.

1({
2    addClass : function(component, event, helper) {
3        var trigger = component.find("trigger");
4        $A.util.addClass(trigger, "myClass");
5    },
6    removeClass : function(component, event, helper) {
7        var trigger = component.find("trigger");
8        $A.util.removeClass(trigger, "myClass");
9    }
10})

Lightning Components Developer’s Guide

ui:collapse