Bagaimana untuk Mencipta Div Boleh Dilipat dengan CSS Minimal?

Css Tulen Runtuh/Kembangkan Div dengan Kod Minimum

Div boleh lipat CSS yang disediakan menggunakan pseudoclass :target boleh digunakan untuk mencipta halaman dengan berbilang bahagian yang boleh dilipat dengan cekap tanpa jumlah CSS yang banyak. Begini caranya:

Menggunakan pseudoclass :target, anda boleh mewujudkan sistem di mana setiap soalan diberikan ID unik, seperti "#q1", "#q2", dan sebagainya. Apabila butang ' ' yang sepadan diklik, ia akan mencetuskan elemen sasaran ID untuk dipaparkan, mendedahkan div jawapan yang berkaitan.

Kod 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>

Dalam kod ini, #wrapper digunakan untuk mengumpulkan semua pasangan soalan-jawapan, memastikan bahawa kesan :target terhad kepada bahagian tertentu itu. Alih keluarnya jika anda lebih suka mengubah suai keseluruhan halaman.

Contoh Penggunaan:

<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>

Ulang corak ini untuk setiap soalan, memastikan ID unik untuk setiap set elemen . Akibatnya, anda boleh membuat berbilang bahagian boleh lipat dengan kod CSS minimum.

Sokongan Penyemak Imbas:

Perhatikan bahawa penyelesaian ini bergantung semata-mata pada CSS3 dan mungkin tidak disokong oleh pelayar lama. Selain itu, penggunaan :target boleh mengakibatkan isu prestasi pada halaman dengan banyak bahagian yang boleh dilipat.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Div Boleh Dilipat dengan CSS Minimal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!