Практика: двухуровневое раскрывающееся оглавление
В небольшом учебном оглавлении вложенные details позволяют показать дополнительные подразделы по запросу. Нужно сохранить понятные подписи уровней и не превратить навигацию в длинную цепочку скрытых действий.
Назначение
В небольшом учебном оглавлении вложенные details позволяют показать дополнительные подразделы по запросу. Нужно сохранить понятные подписи уровней и не превратить навигацию в длинную цепочку скрытых действий.
Как это работает
Внутренний details располагается после summary внешнего блока. Используйте разные конкретные названия. Ссылки в демонстрации ведут к реальным разделам ниже, поэтому пример можно проверить без внешних переходов.
Пример
<details open><summary>Темы курса</summary><details style="margin-inline-start:1rem"><summary>Разметка документа</summary><ul><li><a href="#outline-head">Заголовки</a></li><li><a href="#outline-list">Списки</a></li></ul></details></details>
<section id="outline-head"><h2>Заголовки</h2><p>Выберите уровни по структуре.</p></section><section id="outline-list"><h2>Списки</h2><p>Сгруппируйте связанные пункты.</p></section>Что должно получиться
Внешний уровень открыт изначально, внутренний можно раскрыть отдельно. После открытия становятся доступны две ссылки. Закрытие родителя скрывает его содержимое, не обязательно сбрасывая состояние вложенного блока.
Граница применения и частая ошибка
Не стройте глубокие вложенные меню только потому, что это возможно. Состояние details не заменяет полноценный поиск по большому каталогу. Не помещайте интерактивную ссылку внутрь summary, если она должна выполнять отдельное действие перехода.
Самостоятельная проверка
Откройте оба уровня, закройте родителя и снова откройте: проверьте сохранение состояния потомка. Повторите клавиатурой и убедитесь, что названия уровней понятны без визуального отступа. Оцените, не проще ли обычный список.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.