最小限の CSS で折りたたみ可能な Div を作成するには?

最小限のコードによる純粋な CSS 折りたたみ / 展開 Div

:target 疑似クラスを使用して提供された 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 中国語 Web サイトの他の関連記事を参照してください。