Cara yang berbeza (dan moden) untuk menukar kandungan

Master Modern Web Content Switching Skills: Katakan selamat tinggal display: none!

Jika anda ingin melakukan perkara dengan baik, anda mesti mengasah alat anda terlebih dahulu.

- Abraham Maslow

Mudah untuk digunakan untuk menggunakan alat yang biasa. Untuk menukar kandungan, anda boleh digunakan untuk menggunakan

atau display: none, ditambah dengan beberapa kod JavaScript. Tetapi pada masa kini, teknologi web lebih moden, dan sudah tiba masanya untuk melihat pelbagai kaedah penukaran kandungan: API asli yang disokong, apakah kebaikan dan keburukan mereka, dan beberapa butiran yang anda tidak tahu (seperti elemen pseudo dan kandungan yang tidak jelas). opacity: 0

mari kita bincangkan unsur -unsur

dan <details></details>, API dialog, API Popover, dan banyak lagi. Kami akan meneroka bila menggunakan setiap kaedah mengikut keperluan anda. Modal atau bukan modal? JavaScript atau HTML/CSS tulen? Jangan risau, kami akan menerangkannya satu persatu. <summary></summary>

dan <details></details> elemen <summary></summary>

Senario aplikasi: Ringkasan kandungan dalam cara yang mudah diakses sambil membenarkan butiran kandungan dihidupkan secara bebas atau sebagai komponen gaya akordion.

Dikemaskini 12 Disember 2024: Artikel baru di blog Chrome menunjukkan beberapa cara yang lebih menarik untuk digunakan , termasuk galeri animasi dan sebahagiannya dibuka <details></details> (ada pilihan untuk menggunakan <details></details> untuk animasi). calc-size

Dalam urutan pelepasan, unsur -unsur

dan <details></details> menandakan kali pertama kita boleh menukar kandungan tanpa menggunakan JavaScript atau helah kotak semak yang unik. Tetapi kekurangan sokongan penyemak imbas jelas akan menghalang populariti ciri -ciri baru, terutama ciri ini pada mulanya tidak mempunyai akses keyboard. Sekiranya anda tidak menggunakannya sejak pelepasan Chrome 12 pada tahun 2011, saya dapat memahami. Tidak melihat atau merasa kecewa, bukan? <summary></summary>

Berikut adalah perkara utama:

Ia berfungsi dengan baik tanpa JavaScript (tanpa sebarang kompromi).
tetapan gaya penuh tanpa
• dll. appearance: none
anda boleh menyembunyikan tanda tanpa menggunakan pseudo-selectror yang tidak standard.
anda boleh menyambungkan pelbagai
• elemen untuk membuat komponen gaya akordion. <details></details>
dan ... ia boleh menjadi animasi sepenuhnya bermula dari 2024.

tag elemen <details></details>

apa yang anda perlukan ialah:

<details><summary>内容摘要（始终可见）</summary>
  内容（单击摘要时切换可见性）
</details>

Di latar belakang, kandungan dibalut dengan elemen pseudo, dan bermula pada tahun 2024, kita boleh memilihnya menggunakan

. Di samping itu, terdapat pseudo-elemen ::details-content yang menunjukkan sama ada ::marker berada di dalam atau di luar, dan kami boleh menyesuaikannya. <details></details>

dengan ini,

di latar belakang, ia sebenarnya kelihatan seperti ini: <details></details>

<details><summary>内容摘要（始终可见）</summary>
  内容（单击摘要时切换可见性）
</details>

untuk membuat <details></details> secara lalai, tambahkan atribut <details></details> ke open, yang sama dengan apa yang berlaku di latar belakang apabila <details></details> dihidupkan.

<details><summary><::marker></::marker>内容摘要（始终可见）</summary><::details-content>
      内容（单击摘要时切换可见性）
  </::details-content></details>

<details></details> Tetapan gaya elemen

jujur: Anda mungkin hanya mahu mengeluarkan tanda yang menjengkelkan itu. Anda boleh melakukan ini dengan menetapkan harta <summary></summary> 's display ke mana -mana nilai selain daripada list-item:

<details open=""> ... </details>

atau, anda boleh mengubah suai tanda. Malah, contoh berikut menggunakan font hebat untuk menggantikannya dengan ikon lain, tetapi ingat bahawa ::marker tidak menyokong banyak sifat. Penyelesaian yang paling fleksibel adalah membungkus kandungan <summary></summary> dengan elemen dan pilihnya dalam CSS.

summary {
  display: block; /* 或任何其他非 list-item 的值 */
}

<details><summary>内容摘要</summary>
  内容
</details>

Buat komponen gaya akordion menggunakan pelbagai <details></details> elemen

Untuk membuat komponen gaya akordion, gunakan atribut name untuk menamakan unsur-unsur berbilang <details></details> dan gunakan nilai yang sepadan (serupa dengan cara melaksanakan butang radio):

details {

  /* 标记 */
  summary::marker {
    content: "\f150";
    font-family: "Font Awesome 6 Free";
  }

  /* <details>打开时的标记 */
  &[open] summary::marker {
    content: "\f151";
  }

  /* 因为 ::marker 不支持许多属性 */
  summary span {
    margin-left: 1ch;
    display: inline-block;
  }

}</details>

Menggunakan pembungkus, kita juga boleh mengubahnya menjadi tab mendatar:

<details name="starWars" open=""><summary>前传</summary><ul>
<li>第一集：幽灵的威胁</li>
    <li>第二集：克隆人的进攻</li>
    <li>第三集：西斯的复仇</li>
  </ul></details><details name="starWars"><summary>原版</summary><ul>
<li>第四集：新希望</li>
    <li>第五集：帝国反击战</li>
    <li>第六集：绝地归来</li>
  </ul></details><details name="starWars"><summary>续集</summary><ul>
<li>第七集：原力觉醒</li>
    <li>第八集：最后的绝地武士</li>
    <li>第九集：天行者的崛起</li>
  </ul></details>

<div>
  <details name="starWars" open=""> ... </details><details name="starWars"> ... </details><details name="starWars"> ... </details>
</div>

... atau, gunakan API kedudukan anchor 2024 untuk membuat tab menegak (sama html):

div {
  gap: 1ch;
  display: flex;
  position: relative;

  details {
    min-height: 106px; /* 防止内容偏移 */

    &[open] summary,
    &[open]::details-content {
      background: #eee;
    }

    &[open]::details-content {
      left: 0;
      position: absolute;
    }
  }
}

Jika anda ingin tahu bagaimana kami menggunakan API Popover di CSS, anda boleh menyemak artikel John Rhea, di mana dia membuat permainan interaktif menggunakan hanya unsur -unsur <details></details>!

Tambah fungsi JavaScript

Ingin menambah beberapa ciri JavaScript?

div {

  display: inline-grid;
  anchor-name: --wrapper;

  details[open] {

    summary,
    &::details-content {
      background: #eee;
    }

    &::details-content {
      position: absolute;
      position-anchor: --wrapper;
      top: anchor(top);
      left: anchor(right);
    }
  }
}

Buat elemen <details></details> diakses

unsur -unsur boleh diakses selagi beberapa peraturan diikuti. Sebagai contoh, <details></details> pada dasarnya adalah <summary></summary>, yang bermaksud bahawa apabila ia mendapat fokus, pembaca skrin mengumumkan kandungannya. Sekiranya tidak ada elemen kanak -kanak langsung <label></label> atau <summary></summary> bukan <summary></summary>, ejen pengguna membuat tag untuk anda yang biasanya dipaparkan sebagai "butiran" baik secara visual dan dalam teknologi bantuan. Pelayar yang lebih tua mungkin menegaskan bahawa ia adalah elemen kanak -kanak yang pertama, jadi lebih baik untuk menetapkannya sebagai elemen anak pertama. <details></details> Di samping itu, mempunyai peranan butang, jadi apa yang tidak sah dalam

juga tidak sah dalam

. Ini termasuk tajuk, jadi anda boleh gaya <summary></summary> sebagai tajuk, tetapi anda tidak boleh memasukkan tajuk ke dalam <button></button>. <summary></summary> <summary></summary> Oleh kerana batasan ruang, semua kandungan yang tinggal tidak dapat diterjemahkan. Sila berikan bahagian lain dan saya akan berusaha sebaik mungkin untuk diterjemahkan. <summary></summary>

Atas ialah kandungan terperinci Cara yang berbeza (dan moden) untuk menukar kandungan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!