语义UI>手风琴>嵌套手风琴上的自定义触发元素

时间:2015-10-30 10:25:40

标签: semantic-ui

我希望为顶级手风琴元素以及子级别提供自定义触发元素。这个结构的JS代码是什么?

<div class="ui accordion">
    <div class="title">
        <span class="custom-trigger-1"></div>
    </div>
    <div class="content">
        <div class="accordion">
            <div class="title">
                <span class="custom-trigger-2"></div>
            </div>
            <div class="content"></div>
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:1)

你的html需要一些标签更正..但你可以通过以下方式实现这一目标:

$('.ui.accordion').accordion().on('click', function(e) {


    console.log(e);

});

现在您可以参考点击的dom对象,并可以获得自定义触发器&#34;标识符(或多个)。

如果这是一个简单的用例,那么我建议使用onclick =&#34;&#34; html属性或使用<a>标记。

查看实际操作:http://codepen.io/appsoa/details/XmYRyz/

标记,如果使用javascript渲染组件:

<div class="ui styled accordion"> <div class="active title"> <i class="dropdown icon"></i> Level 1 </div> <div class="active content"> Welcome to level 1 <div class="accordion"> <div class="active title"> <i class="dropdown icon"></i> Level 1A </div> <div class="active content"> <p>Level 1A Contents</p> <div class="accordion"> <div class="title active"> <i class="dropdown icon"></i> Level 1A-A </div> <div class="content active"> Level 1A-A Contents </div> <div class="title"> <i class="dropdown icon"></i> Level 1A-B </div> <div class="content"> Level 1A-B Contents </div> </div> </div> <div class="title"> <i class="dropdown icon"></i> Level 1B </div> <div class="content"> Level 1B Contents </div> <div class="title"> <i class="dropdown icon"></i> Level 1C </div> <div class="content"> Level 1C Contents </div> </div> </div> <div class="title"> <i class="dropdown icon"></i> Level 2 </div> <div class="content"> <p>Welcome to level 2</p> <div class="accordion"> <div class="active title"> <i class="dropdown icon"></i> Level 2A </div> <div class="active content"> <p>Level 2A Contents</p> <div class="accordion"> <div class="title"> <i class="dropdown icon"></i> Level 2A-A </div> <div class="content"> Level 2A-A Contents </div> <div class="title"> <i class="dropdown icon"></i> Level 2A-B </div> <div class="content"> Level 2A-B Contents </div> </div> </div> <div class="title"> <i class="dropdown icon"></i> Level 2B </div> <div class="content"> Level 2B Contents </div> <div class="title"> <i class="dropdown icon"></i> Level 2C </div> <div class="content"> Level 2C Contents </div> </div> </div> </div>