Аккордеон
Условие
Секции из массива items: [{ id, title, body }]. Требования: · заголовок секции - <button class="head" data-id={id}>; · тело показывается только у раскрытой секции, в <div class="body">; · одновременно раскрыта не более одной секции; · повторный клик по раскрытой секции её закрывает; · у кнопки должен быть aria-expanded.
Что проверяют тесты
рисует заголовки, тела скрыты
клик раскрывает
раскрыта не больше одной
повторный клик закрывает
aria-expanded отражает состояние
Как подойти
Состояние openId (одно значение) вместо Set или массива булевых: требование «не больше одной» становится невыразимо нарушаемым, а закрытие по повтору - это просто сравнение с текущим. Если бы требовалось несколько раскрытых - тогда Set. Проговори этот выбор вслух, интервьюер обычно тут же спрашивает про multi-режим.
Подсказки: 2
- Одно состояние - идентификатор раскрытой секции, а не массив флагов.
- null означает «всё закрыто», это же даёт закрытие по повторному клику.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.