Enam tahun lalu, saya meneroka dan elemen untuk mencipta akordion yang boleh diakses. Sejak itu, platform web telah berkembang, memperkenalkan ciri baharu yang menarik seperti gelagat terbuka eksklusif dan animasi lancar untuk elemen ini.

HTML Asli: Akordion

Andrew Bone ? 4 Jan '19

#html #css #a11y #reka bentuk

Dalam artikel ini, kami akan menyemak semula dan gunakan sepenuhnya sifat CSS moden untuk menambah pengilat pada akordion anda. Saya juga akan berkongsi pelaksanaan demo yang mempamerkan ciri ini.

Asas: dan

elemen menyediakan cara asli untuk mencipta bahagian boleh togol dalam HTML, dengan elemen bertindak sebagai label boleh klik. Ini memudahkan untuk membuat widget pendedahan dengan usaha yang minimum.

Ini contoh mudah:

<details>
  <summary>Read more</summary>
  Some text to be hidden. 
</details>

Mengklik ringkasan menogol keterlihatan kandungan yang berkaitan. Tiada JavaScript diperlukan!

Penambahbaikan: Gelagat Terbuka Eksklusif

Untuk meniru tingkah laku akordion tradisional, di mana hanya satu bahagian dibuka pada satu masa, anda boleh menggunakan atribut nama pada elemen. Apabila elemen berkongsi nama yang sama, membuka satu secara automatik menutup yang lain dalam kumpulan.

<details name="exclusive">
  <summary>Section 1</summary>
  <p>Content for section 1.</p>
</details>
<details name="exclusive">
  <summary>Section 2</summary>
  <p>Content for section 2.</p>
</details>

Tingkah laku ini asli dan berfungsi dengan lancar dalam penyemak imbas moden!

Menambah Animasi Lancar dengan CSS

Untuk menjadikan peralihan pembukaan dan penutupan lebih lancar, kami boleh menggunakan sifat CSS moden seperti saiz interpolasi dan gelagat peralihan.

Sifat Utama

• saiz interpolate: Membenarkan menganimasikan antara saiz intrinsik (seperti auto) dan saiz tetap. Hartanah ini hanya disokong dalam Chrome pada masa ini.
• tingkah laku peralihan: Apabila ditetapkan kepada membenarkan-diskrit, sifat yang biasanya tidak boleh dianimasikan seperti keterlihatan dan paparan menunggu dan bukannya mengemas kini serta-merta.

Contoh Penggayaan

Berikut ialah contoh lengkap CSS yang digunakan dalam demo:

details {
  interpolate-size: allow-keywords;
  overflow: clip;
  margin-top: 0.125em;
  border: 1px solid #dddddd;
  background: #ffffff;
  color: #333333;
  border-radius: 3px;
}

details summary {
  display: block;
  cursor: pointer;
  position: relative;
  padding: 0.5em 0.5em 0.5em 0.7em;
  background: #ededed;
  color: #2b2b2b;
  border-radius: 3px 3px 0 0;
}

details:not([open]) summary:hover,
details:not([open]) summary:focus {
  background: #f6f6f6;
  color: #454545;
}

details[open] summary {
  outline: 1px solid #003eff;
  background: #007fff;
  color: #ffffff;
}

details[open]::details-content {
  height: auto;
}

details::details-content {
  height: 0;
  overflow-y: clip;
  transition: content-visibility 475ms allow-discrete, height 475ms;
}

details main {
  padding: 1em 2.2em;
}

Bagaimana Ia Berfungsi

1. Animasi Ketinggian: Sifat bersaiz interpolate membolehkan peralihan lancar antara ketinggian: 0 (tertutup) dan ketinggian: auto (terbuka). Walau bagaimanapun, ini hanya disokong dalam Chrome pada masa ini.
2. Peralihan Keterlihatan: Sifat peralihan-tingkah laku memastikan perubahan keterlihatan kelihatan lancar.

Demo: Menyatukan Semuanya

Berikut ialah pelaksanaan penuh:

Sokongan Pelayar

• interpolate-size: Pada masa ini hanya disokong dalam Chrome.
• tingkah laku peralihan: Disokong dalam kebanyakan penyemak imbas moden.

Untuk penyemak imbas tanpa sokongan, animasi dikembalikan dengan anggun, dan akordion kekal berfungsi tanpa peralihan yang lancar.

Kesimpulan

dan elemen, digabungkan dengan CSS moden, menyediakan penyelesaian yang ringan dan boleh diakses untuk mencipta akordion interaktif. Penambahbaikan baharu ini menjadikannya lebih menarik untuk projek web moden. Cuba tunjuk cara dan berikan akordion anda rupa yang segar dan digilap!

Terima kasih banyak kerana membaca. Jika anda ingin berhubung dengan saya di luar Dev, inilah twitter saya, bsky dan linkedin datang bertanya khabar ?

Atas ialah kandungan terperinci HTML Asli: Akordion Dilawati Semula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!