최소한의 CSS로 여러 개의 축소 가능한 Div를 만드는 방법은 무엇입니까?

순수한 CSS 축소 및 확장

최소한의 CSS로 여러 축소 가능한 Div 사용자 정의

당면한 문제는 다음을 만드는 것입니다. 과도한 선택기로 CSS 코드를 부풀리지 않고 단일 페이지에 여러 개의 축소 가능한 div를 배치할 수 있습니다. 이 경우 제공된 코드는 :target 의사 클래스를 활용하지만 각 질문에 대해 고유한 선택기가 필요합니다.

해결책:

및 <세부정보> 태그

보다 효율적인 접근 방식은 HTML5

및 <세부정보> 태그. 이러한 태그는 접거나 확장할 수 있는 콘텐츠 요소를 만들기 위해 특별히 설계되었습니다.

<code class="html"><details>
  <summary>This is what you want to show before expanding</summary>
  <p>This is where you put the details that are shown once expanded</p>
</details></code>

브라우저 호환성

및 <세부정보> 태그는 괜찮지만 다양합니다. WebKit 기반 브라우저는 최상의 결과를 제공합니다. 다른 브라우저에서는 기본적으로 모든 축소 가능한 콘텐츠를 표시할 수 있지만 원본 코드에 설명된 대로 숨기기/표시 방법을 사용하여 대체 옵션을 고려할 수 있습니다.

위 내용은 최소한의 CSS로 여러 개의 축소 가능한 Div를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!