Navigation

手风琴效果

Class

手风琴效果

组织 HTML 结构

<div id="accordion1" class="s-demo">
    <div class="ks-switchable-trigger"><i class="ks-icon"></i><h3>标题A</h3></div>
    <div class="ks-switchable-panel" style="display:none;">
        1、支持鼠标滑过和点击触点两种方式<br/>
        2、支持同时展开多个面板
    </div>
    <div class="ks-switchable-trigger"><i class="ks-icon"></i><h3>标题B</h3></div>
    <div class="ks-switchable-panel" style="display:none;">内容B</div>
    <div class="ks-switchable-trigger"><i class="ks-icon"></i><h3>标题C</h3></div>
    <div class="ks-switchable-panel" style="display:none;">内容C<br/>输入：<input/></div>
    <div class="ks-switchable-trigger last-trigger"><i class="ks-icon"></i><h3>标题D</h3>
    </div>
    <div class="ks-switchable-panel last-panel" style="display:none;">内容D<br/>输入：<input/></div>
</div>

JS 初始化

 KISSY.use("dom,event,anim,switchable", function(S, DOM, Event, Anim, Switchable) {
    var Accordion = Switchable.Accordion;
    //通过DOM元素新建手风琴
    S.ready(function(S) {
        window.accordion = Accordion('#accordion1', {
            multiple: true //,
            //autoplay:true,
            //switchTo:0
            //'activeTriggerCls': 'collapse'
        });
    });
});

Navigation