Семантический интерфейс> Аккордеон> Пользовательский триггерный элемент на вложенном аккордеоне

Question

Я хочу иметь пользовательский триггерный элемент для элементов аккордеона верхнего уровня, а также для подуровня. Каким будет правильный код 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>

Answer 1

Ваш HTML нуждается в некоторой коррекции тегов... но вы можете сделать это с помощью:

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


    console.log(e);

});

Теперь у вас есть ссылка на объект dom, по которому щелкнули, и вы можете получить свои идентификаторы "пользовательского триггера".

Если это простой случай использования, я бы рекомендовал использовать атрибут html onclick="" или использовать <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>