Bagaimana saya menggunakan HTML5 & lt; butiran & gt; dan & lt; ringkasan & gt; Unsur -unsur untuk membuat kandungan yang boleh dilipat?

Cara menggunakan elemen HTML5 <details></details> dan <summary></summary> untuk membuat kandungan yang boleh dilipat

Unsur -unsur <details></details> dan <summary></summary> menyediakan cara yang mudah dan semantik untuk membuat kandungan yang boleh dilipat. Elemen <details></details> bertindak sebagai bekas untuk kandungan yang boleh dilipat, manakala elemen <summary></summary> menyediakan tajuk atau label yang, apabila diklik, menukarkan penglihatan kandungan dalam elemen <details></details> .

Inilah cara ia berfungsi:

• <summary></summary> : Elemen ini diperlukan dalam elemen <details></details> dan bertindak sebagai kawalan untuk menunjukkan atau menyembunyikan kandungan. Kandungan teks elemen <summary></summary> dipaparkan sebagai tajuk atau label untuk bahagian yang dilipat.
• <details></details> : Elemen ini merangkumi elemen <summary></summary> dan semua kandungan yang anda mahu dilipat. Apabila halaman dimuatkan, kandungan dalam elemen <details></details> pada mulanya tersembunyi secara lalai. Mengklik elemen <summary></summary> togol penglihatan kandungan.

Contoh:

 <code class="html"><details> <summary>Click to Expand</summary> <p>This is the collapsible content. You can include any HTML content here, such as paragraphs, images, lists, etc.</p> </details></code>

Dalam contoh ini, klik "Klik untuk memperluaskan" akan mendedahkan perenggan teks. Mengklik semula akan runtuh kandungan. Penyemak imbas mengendalikan toggling penglihatan secara automatik. Tiada JavaScript diperlukan untuk fungsi asas.

Menggayakan unsur <details></details> dan <summary></summary> dengan CSS

Anda boleh menyesuaikan sepenuhnya penampilan unsur -unsur <details></details> dan <summary></summary> menggunakan CSS. Ini membolehkan anda memadankan kandungan yang dilipat dengan reka bentuk laman web keseluruhan anda. Anda boleh gaya elemen <summary></summary> untuk menukar penampilan togol, dan anda boleh gaya elemen <details></details> untuk mengawal penampilan kandungan apabila ia berkembang dan runtuh.

Contoh:

 <code class="css">details { border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; } summary { cursor: pointer; background-color: #f0f0f0; padding: 5px; margin-bottom: 5px; } details[open] summary { /* Style when open */ background-color: #ddd; } details[open] { /* Style the details when open */ border-color: #aaa; }</code>

CSS ini menambah sempadan dan padding ke elemen <details></details> , gaya <summary></summary> elemen dengan warna latar belakang dan padding, dan menambah gaya yang berbeza apabila elemen <details></details> dibuka (menggunakan pemilih atribut [open] ). Anda boleh menyesuaikan gaya ini agar sesuai dengan reka bentuk laman web anda. Ingatlah untuk menyedari kebolehcapaian apabila gaya, memastikan kontras yang mencukupi dan penunjuk visual yang jelas.

Pertimbangan kebolehcapaian semasa menggunakan <details></details> dan <summary></summary>

Walaupun <details></details> dan <summary></summary> menawarkan cara semantik dan boleh diakses untuk membuat kandungan yang boleh dilipat, terdapat beberapa pertimbangan kebolehcapaian:

• Atribut Aria: Walaupun tidak diperlukan dengan ketat, menggunakan atribut ARIA dapat meningkatkan kebolehcapaian untuk pembaca skrin dan teknologi bantuan lain. Sebagai contoh, menambah aria-label deskriptif ke elemen <summary></summary> boleh memberikan konteks tambahan.
• Navigasi papan kekunci: Pastikan kandungan yang dilipat dapat dilayari menggunakan papan kekunci. Tingkah laku penyemak imbas lalai sudah menyediakan ini, tetapi gaya adat tidak boleh mengganggu dengannya.
• Petunjuk visual yang jelas: Gunakan isyarat visual yang jelas untuk menunjukkan keadaan terbuka/tertutup, seperti warna latar belakang atau ikon yang berbeza. Memastikan kontras warna yang mencukupi untuk pengguna dengan gangguan visual.
• Teks Alternatif: Jika menggunakan ikon dalam <summary></summary> , berikan teks alternatif yang sesuai untuk pembaca skrin.

Isu Keserasian Pelayar dengan <details></details> dan <summary></summary>

Umumnya, <details></details> dan <summary></summary> mempunyai sokongan penyemak imbas yang baik. Walau bagaimanapun, pelayar yang lebih tua mungkin tidak menjadikannya dengan betul. Untuk pelayar yang lebih tua, anda mungkin memerlukan polyfill JavaScript atau mekanisme sandaran. Pelayar moden (Chrome, Firefox, Safari, Edge) menyokong unsur -unsur ini secara asli tanpa memerlukan kerja tambahan di luar HTML dan CSS asas. Sentiasa menguji pelaksanaan anda merentasi pelbagai pelayar dan teknologi bantuan untuk memastikan tingkah laku dan kebolehcapaian yang konsisten. Pertimbangkan menggunakan alat seperti Caniuse.com untuk menyemak sokongan untuk unsur -unsur ini dalam versi penyemak imbas yang berbeza.

Atas ialah kandungan terperinci Bagaimana saya menggunakan HTML5 & lt; butiran & gt; dan & lt; ringkasan & gt; Unsur -unsur untuk membuat kandungan yang boleh dilipat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!