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

최소 코드로 순수 CSS 축소/확장

:target pseudoclass를 사용하여 제공된 CSS 축소 가능 div를 사용하여 페이지를 생성할 수 있습니다. 상당한 양의 CSS 없이도 여러 개의 접을 수 있는 섹션을 효율적으로 사용합니다. 방법은 다음과 같습니다.

:target 의사 클래스를 활용하면 각 질문에 "#q1", "#q2" 등과 같은 고유한 ID가 할당되는 시스템을 구축할 수 있습니다. 해당 ' ' 버튼을 클릭하면 ID의 대상 요소가 표시되어 관련 답변 div가 표시됩니다.

CSS 코드:

<code class="css">.FAQ {
    vertical-align: top;
    height: auto !important;
}
.list {
    display: none;
    height: auto;
    margin: 0;
    float: left;
}
.show {
    display: none;
}
#wrapper > .hide:target + .show {
    display: inline;
}
#wrapper > .hide:target {
    display: none;
}
#wrapper > .hide:target ~ .list {
    display: inline;
}</code>

In 이 코드에서 #wrapper는 모든 질문-답변 쌍을 그룹화하는 데 사용되어 :target 효과가 해당 특정 섹션으로 제한되도록 합니다. 전체 페이지를 수정하려면 이를 제거하세요.

사용 예:

<code class="html"><div id="wrapper">
    <a href="#q1" class="hide" id="hide1">+</a>
    <a href="#q1show" class="show" id="show1"> -</a>
    <div class="question"> Question 1? </div>
    <div class="list">
        <p> Answer 1 </p>
    </div>
</div></code>

각 질문에 대해 이 패턴을 반복하여 각 요소 세트에 고유한 ID를 보장합니다. . 결과적으로 최소한의 CSS 코드로 여러 개의 축소 가능한 섹션을 만들 수 있습니다.

브라우저 지원:

이 솔루션은 CSS3에만 의존하며 CSS3에서는 지원되지 않을 수 있습니다. 오래된 브라우저. 또한 :target을 사용하면 축소 가능한 섹션이 많은 페이지에서 성능 문제가 발생할 수 있습니다.

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