Мастерство в HTML Details и Summary

Введение

В HTML тег <summary> используется для создания-expandable и collapsible элемента резюме для содержимого, присутствующего на веб-странице.

Примечание: вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Пожалуйста, нажмите на 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Добавление тега

Прежде чем добавить тег <summary>, нам нужно создать раздел содержимого, который можно развернуть или свернуть. Для этого мы будем использовать тег <details>. Добавьте следующий код в файл index.html внутри тега <body>.

<details>
  <summary>Click me to see the content</summary>
  <p>Content goes here.</p>
</details>

В приведенном выше коде мы добавили тег резюме внутри тега сведений, чтобы определить резюме содержимого.

Добавление атрибута aria-expanded

Мы можем добавить атрибут aria-expanded к тегу сведений, чтобы указать текущее состояние содержимого. Когда содержимое развернуто, значение aria-expanded будет равно true, а когда оно свернуто, значение будет равно false. Добавьте следующий код после тега <summary>, чтобы включить атрибут aria-expanded.

<details>
  <summary aria-expanded="false">Click me to see the content</summary>
  <p>Content goes here.</p>
</details>

Стилизация тега summary

Тег <summary> не имеет особых атрибутов, но мы можем стилизовать его с использованием CSS. Добавьте следующий код в тег <style>, чтобы добавить некоторую стилизацию к тегу <summary>.

summary {
  padding: 10px;
  background-color: #eee;
  cursor: pointer;
}

Добавление дополнительного содержимого

Мы можем добавить больше содержимого внутри тега <details>, и оно автоматически будет развертываемым и свертываемым. Добавьте следующий код после первого абзаца, чтобы добавить больше содержимого.

<details>
  <summary aria-expanded="false">Click me to see the content</summary>
  <p>Content goes here.</p>
  <p>More content.</p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
  </ul>
</details>

Добавление нескольких разворачиваемых разделов

Мы можем добавить несколько развертываемых разделов на веб-страницу. Добавьте следующий код, чтобы создать еще один развертываемый раздел.

<details>
  <summary aria-expanded="false">Another section</summary>
  <p>Content of another section</p>
</details>

Резюме

Тег <summary> можно использовать для создания развертываемых и свертываемых разделов содержимого на веб-странице. Мы можем добавить больше содержимого внутри тега <details> и использовать стилизацию для настройки внешнего вида тега <summary>. Добавляя атрибут aria-expanded, мы можем указать текущее состояние содержимого, что делает его доступным для пользователей с ограниченными возможностями.

HTML Details Summary