JavaScript 라이브러리 없이 HTML 및 CSS에서 축소 가능한 헤더를 만들 수 있습니까?

jQuery 없이 HTML 및 CSS에서 축소 가능한 헤더 구현

모바일 웹사이트를 제작할 때 이와 유사한 축소 가능한 헤더가 필요할 수 있습니다. jQuery Mobile의 Content Collapsible 기능에서 제공됩니다. 그러나 페이지가 오프라인 사용을 목적으로 하는 경우 jQuery를 사용하는 것은 비생산적인 것처럼 보일 수 있습니다. HTML과 CSS만 사용하여 이 기능을 구현할 수 있습니까?

HTML5의 구조: 세부 정보 및 요약 태그

HTML5는 두 CSS 스타일링이 모두 필요하지 않은 솔루션을 제공합니다. 및 자바스크립트: 그리고 <요약> 태그. 그 기능을 활용하는 방법을 살펴보겠습니다.

<details>
  <summary>Collapse 1</summary>
  <p>Content 1...</p>
</details>
<details>
  <summary>Collapse 2</summary>
  <p>Content 2...</p>
</details>

이러한 태그를 HTML 구조에 통합하면 추가 스크립팅 없이 쉽게 전환할 수 있는 확장 및 축소 가능한 섹션을 만들 수 있습니다. <요약> 요소는 접을 수 있는 헤더 역할을 하며 요소를 클릭하거나 탭하면 해당 내용이 표시되거나 숨겨집니다.

더 진행하면서 pure를 사용하여 이 효과를 달성하는 다른 창의적인 접근 방식을 보여주는 몇 가지 추가 예를 발견하게 됩니다. 특정 요구 사항을 충족하는 HTML 및 CSS.

위 내용은 JavaScript 라이브러리 없이 HTML 및 CSS에서 축소 가능한 헤더를 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!