извините за такой конкретный вопрос. Я пытаюсь сделать аккордеон, используя основные и повторяющиеся шаблоны, и сталкиваюсь с некоторыми трудностями. Вот мой повторяющийся шаблон аккордеона:
<template repeat="{{item, i in items}}">
<div class="accordheader" on-click="{{toggle}}">{{item}}</div>
<template repeat="{{content, i in contents}}">
<core-collapse class="collapse">
<p>{{content}}</p>
</core-collapse>
</template>
</template>
и вот мой скрипт:
toggle: function () {
//get whichever 'accordheader' clicked on
var collapseGetting = this.shadowRoot.querySelector('.accordheader');
console.log(collapseGetting);
//find the core-collapse that is directly underneath it
var collapse = $(collapseGetting).next('core-collapse');
console.log(collapse);
//toggle that particular core-collapse
collapse.toggle();
console.log('toggled');
}
И теперь мой переключатель полностью сломан и на самом деле ничего не переключает. Я все еще получаю «переключенный» журнал консоли, но ничего не происходит. Я не уверен, правильно ли я нацеливаюсь на следующий коллапс ядра или даже правильно вставляю повторяющиеся шаблоны. В основном у меня есть 2 массива, [items]
и [contents]
, из которых я извлекаю свой элемент для каждого .accordheader
и свой контент для каждого core-collapse
.
Любое понимание? Я чувствую, что это проблема форматирования или шаблона.