순수 HTML 및 CSS로 축소 가능한 DIV를 어떻게 만들 수 있나요?-CSS 튜토리얼-php.cn

순수 HTML 및 CSS로 축소 가능한 DIV를 어떻게 만들 수 있나요?

Linda Hamilton

풀어 주다： 2024-12-06 15:02:12

원래의

975명이 탐색했습니다.

How Can I Create Collapsible DIVs with Pure HTML and CSS?

HTML, CSS를 사용한 축소 가능한 DIV

jQuery에 의존하지 않고 숨길 수 있고 축소 가능한 DIV 요소를 만드는 방법을 찾고 계십니까? 이 문제는 특히 오프라인 액세스가 중요한 모바일 웹사이트 디자인에서 자주 발생합니다. 순수한 HTML과 CSS를 사용하면 이 기능을 구현할 수 있습니다.

해결책:

HTML5의

및 <요약> 태그는 실행 가능한 솔루션입니다.

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

로그인 후 복사

이 접근 방식은 추가적인 JavaScript 또는 CSS 스타일 지정 없이 HTML5의 기본 기능을 활용합니다. <세부정보> 태그는 접을 수 있는 컨테이너를 나타내고

태그는 대화형 헤더를 정의합니다. <요약> 태그는 <세부정보> 태그.

위 내용은 순수 HTML 및 CSS로 축소 가능한 DIV를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!