광범위한 코드 없이 순수 CSS에서 여러 개의 축소 가능한 Div를 만드는 방법은 무엇입니까?

순수한 CSS 축소 가능 Div: 여러 요소에 대한 코드 최소화

질문:

순수한 CSS에서 어떻게 각 요소에 대해 광범위한 코드를 작성하지 않고 여러 개의 축소 가능한 div 요소를 사용하시겠습니까?

컨텍스트:

제공된 코드는 :target 의사 클래스를 사용하여 단일 div를 축소 및 확장합니다. 그러나 유사한 div 요소를 많이 만들려면 많은 양의 CSS가 필요합니다.

해결책:

대안 접근 방식은

및 <세부사항> 이 기능을 위해 특별히 설계된 HTML 태그입니다.

세부정보:

• : 세부정보를 확장하기 전에 표시되는 텍스트를 포함합니다.
• : 처음에 숨겨진 자세한 콘텐츠를 포함합니다.

이러한 태그를 중첩하면 CSS 없이 확장 가능한 섹션을 쉽게 만들 수 있습니다.

<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(예: Safari, Chrome)이 최상의 결과를 제공합니다. 다른 브라우저에서는 세부정보가 항상 표시될 수 있습니다.

대체:

및 <세부사항> 태그는 지원되지 않습니다. 광범위한 CSS 선택기와 함께 숨기기/표시 방법을 사용하는 것이 좋습니다.

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