Navigation

手风琴效果（二）

Class

手风琴效果（二）

组织 HTML 结构

<div class="shop-hesper  s-demo" id="accordion2">
    <div class="hesper-cats">
        <ol>
            <li><a href="http://shop62814299.taobao.com?browseType=&search=y">所有宝贝</a><i></i></li>
        </ol>
        <ul class="hesper-cats-list" style="display:none">
            <li><p>内容</p><p>输入：<input /></p></li>
        </ul>
        <i class="trigger" title="展开或者收缩"></i>
    </div>
</div>

JS 初始化

KISSY.use("dom,event,anim,switchable", function(S, DOM, Event, Anim, Switchable) {
    //通过DOM元素新建手风琴
    Switchable.Accordion('#accordion2', {
        'triggerCls': 'trigger',
        'panelCls': 'hesper-cats-list',
        'multiple': 'true',
        'activeTriggerCls': 'collapse'
    });
});

Navigation