Memperbaiki elemen butiran

Elemen HTML5 <details></details> menawarkan cara ringkas untuk membuat kandungan yang boleh dilipat, tetapi ia memberikan cabaran kebolehgunaan yang signifikan: Pautan hash yang mensasarkan kandungan dalam seksyen yang runtuh <details></details> gagal untuk mendedahkan kandungan itu. Artikel ini memperincikan penyelesaian JavaScript yang dipertingkatkan secara progresif, termasuk polyfill yang boleh diakses untuk penyemak imbas yang tidak mempunyai sokongan asli, untuk menyelesaikan masalah ini.

Takeaways utama:

1. elemen <details></details>, sementara berguna, mengalami masalah kebolehgunaan dengan pautan hash yang menyasarkan kandungan tersembunyi.
2. Polyfill berkesan memancarkan <details></details> fungsi untuk penyemak imbas yang tidak disokong.
3. Keberkesanan Polyfill dikompromi apabila pautan hash menunjuk ke elemen di dalam rantau yang runtuh. Halaman kekal di bahagian atas, mengaburkan sasaran.
4. fungsi rekursif menangani ini dengan secara automatik memperluaskan elemen <details></details> yang relevan.

Memperkenalkan <details></details>

elemen

, dipasangkan dengan elemen <details></details>, mewujudkan kandungan yang boleh dilipat. <summary></summary> (jika ada) mestilah anak pertama atau terakhir; Semua kandungan lain boleh dilipat. Atribut <summary></summary> memaksa kandungan pada mulanya dapat dilihat. Pada masa ini, hanya Chrome sepenuhnya menyokong open. Imej berikut menggambarkan rendering Chrome: <details></details>

Mewujudkan polyfill

Polyfill asas mengesan sokongan asli melalui harta

. Pelaksanaan asli tidak memerlukan kemas kini atribut

manual, tetapi atribut ARIA masih memerlukan pengurusan. Struktur biasa kelihatan seperti ini: open open

Skrip menguruskan atribut

<code class="language-html"><details open="open">
  <summary>This is the summary element</summary>
  <div>This is the expanding content</div>
</details></code>

dan menggunakannya sebagai pemilih CSS untuk runtuh visual:

aria-expanded

pembungkus

<code class="language-css">details > div[aria-expanded="false"] {
  display: none;
}</code>

memudahkan menguruskan sifat

dan <div>, terutamanya untuk penyemak imbas yang lebih tua seperti IE7, yang memerlukan pengendalian gaya tambahan. Fungsi <code>aria-expanded mengendalikan ketidakkonsistenan penyemak imbas di papan kekunci klik acara menembak: display addClickEvent

<code class="language-javascript">function addClickEvent(node, callback) {
  // ... (function body as in original article) ...
}</code>

menonjolkan masalah hash

Masalah teras timbul apabila pautan hash (#kandungan pertama, contohnya) mensasarkan elemen dalam rantau

yang runtuh. Halaman tidak menatal ke sasaran; Ia kekal di bahagian atas, meninggalkan sasaran yang tersembunyi.

<details></details>

Memperbaiki masalah hash

fungsi rekursif

menyelesaikan ini:

<code class="language-html"><details open="open">
  <summary>This is the summary element</summary>
  <div>This is the expanding content</div>
</details></code>

Fungsi ini secara rekursif memperluaskan unsur -unsur nenek moyang <details></details> yang mengandungi sasaran. Ia dipanggil pada beban halaman untuk location.hash dan pada klik pautan dalaman. Untuk memastikan menatal yang boleh dipercayai, window.scrollBy digunakan selepas berkembang, meletakkan sasaran dalam viewport. Tingkah laku location.hash asal (tiada skrol automatik pada halaman semula) dikekalkan.

Kesimpulan

Penyelesaian yang dipertingkatkan ini, yang disebut sebagai "omnifill," melangkaui polyfilling asas. Ia meningkatkan kebolehgunaan dan kebolehcapaian untuk semua pelayar, menangani batasan yang wujud dari elemen <details></details>.

Soalan Lazim (Soalan Lazim) Mengenai Elemen Butiran HTML

(bahagian Soalan Lazim dari input asal tetap tidak berubah.)