我希望为顶级手风琴元素以及子级别提供自定义触发元素。这个结构的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>
答案 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>