Bagaimanakah saya boleh menogol keterlihatan berbilang div pada klik menggunakan CSS sahaja?

Mengawal Keterlihatan Div pada Klik Menggunakan CSS

Masalah:

Seorang pengguna ingin menogol keterlihatan berbilang div pada klik menggunakan CSS semata-mata, membenarkan kebolehaksesan tanpa JavaScript.

Penyelesaian:

Gunakan "kotak semak":

1. Buat kotak pilihan tersembunyi: Tentukan a elemen dan tetapkan paparannya kepada tiada menggunakan CSS.
2. Kaitkan acara klik dengan kotak pilihan: Apabila pilihan menu diklik, togol atribut kotak pilihan yang ditandai.
3. Div gaya berdasarkan keadaan kotak pilihan: Gunakan pemilih pseudo :checked dalam CSS untuk menggunakan gaya yang berbeza kepada div bergantung pada sama ada kotak semak ditandakan atau tidak. Ini menjejaskan keterlihatan, pudar atau tingkah laku gelongsor mereka.

Contoh Kod:

<input type="checkbox">

#myCheckbox:checked ~ #myDiv {
  display: block;
  animation: slide-in 0.5s ease-in-out;
}

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

Faedah:

• Kebolehaksesan: Berfungsi tanpa JavaScript didayakan.
• Kawalan: Laraskan animasi CSS untuk menyesuaikan gelagat slaid/pudar.
• Kesederhanaan: Memerlukan kod CSS minimum dan tiada JavaScript.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menogol keterlihatan berbilang div pada klik menggunakan CSS sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!