`index.php`:
Код: Выделить всё
<?= Collapse::widget([
'items' => [
[
'label' => 'Collapse1',
'content' => $this->render('1'),
],
[
'label' => 'Collapse2',
'content' => $this->render('2'),
],
[
'label' => 'Collapse3',
'content' => $this->render('3'),
],
]
]); ?>
Код: Выделить всё
<?= Collapse::widget([
'items' => [
[
'label' => 'Collapse1',
'content' => $this->render('1_1'),
],
[
'label' => 'Collapse2',
'content' => $this->render('1_2'),
],
[
'label' => 'Collapse3',
'content' => $this->render('1_3'),
],
]
]); ?>
Выглядит это следующим образом:
Для реализации некоторого функционала мне требуется отслеживать открытие-закрытие коллапсов на странице интерфейса. Для этого я решил использовать события предоставленные разработчиками bootstrap3: `shown.bs.collapse` и `hidden.bs.collapse`.
Итак, для тестирования я набросал следующий скрипт:
Код: Выделить всё
var collapse = $('.panel-collapse .collapse');
collapse.on('shown.bs.collapse', function ()
{
var active = $(this).attr('id');
console.log('Showing collapse with ' + active + ' id');
});
collapse.on('hidden.bs.collapse', function ()
{
var active = $(this).attr('id');
console.log('Hidden collapse with ' + active + ' id');
});
Проблемы с которыми я столкнулся:
- При первоначальной загрузке страницы, когда все коллапсы еще закрыты, у меня срабатывает событие `shown.bs.collapse` и в консоль выводится сообщение: `Showing collapse with #w1-collapse3 id` говорящее о том, что отрисовался коллапс #2.
- Когда я открываю самый внешний коллапс (на рисунке #1) - я не получаю уведомление в консоль, следовательно событие `shown.bs.collapse` не срабатывает.
- Когда я открываю внутренний коллапс (на рисунке #3) срабатывает событие `shown.bs.collapse` и в консоль выводится два сообщения говорящих о том, что отрисовался коллапсы #2 и #3, хотя коллапс #2 и так уже был отрисован.
Код: Выделить всё
Showing collapse with #w0-collapse1 id
Showing collapse with #w1-collapse3 id
Собственно вопрос, почему так происходит, и как это вылечить?