HTML 및 CSS만으로 Div 가시성을 어떻게 전환할 수 있습니까?

HTML 및 CSS를 사용하여 클릭 시 Div 표시 전환

이 글에서는 다음과 같은 문제에 대한 솔루션을 제공하는 것을 목표로 합니다. 다음과 같은 JavaScript 라이브러리에 의존하지 않고 HTML 및 CSS 기술을 사용하여 클릭 시 div 표시 및 숨기기 jQuery.

HTML5 요소 사용

HTML5 태그 detail 및 summary를 활용하면 접을 수 있는 div를 얻을 수 있습니다. 추가 스타일이나 스크립팅 없이 기능을 사용할 수 있습니다. 이러한 태그는 축소 가능한 섹션 생성을 위한 기본 지원을 제공합니다.

<details><br> <summary>Collapse 1</summary><br> <p>Content 1...</p>
<br></details><br><details><br> <summary>접기 2</summary><br> <p>콘텐츠 2...</p>
<br></details><br>

스타일링을 위한 추가 CSS

위의 접근 방식은 접을 수 있는 동작을 처리하므로 div의 시각적 모양을 향상시킬 수 있습니다. 다음은 CSS 스니펫의 예입니다.

details {<br> border: 1px solid #ccc;<br> margin-top: 10px;<br> padding: 10px;<br>}<br>요약 {<br> 배경: #eee;<br> 커서: 포인터;<br> 패딩: 5px;<br> 디스플레이: 블록;<br>}<br>요약:hover {<br> 배경: #ccc;<br>}<br>

이러한 기술을 구현하면 jQuery나 기타 JavaScript 없이도 HTML 및 CSS로 축소 가능한 섹션을 효과적으로 만들 수 있습니다. 도서관.

위 내용은 HTML 및 CSS만으로 Div 가시성을 어떻게 전환할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!