Bagaimana untuk membuat menu akordion CSS sahaja?

Gunakan kotak semak tersembunyi dan CSS: Pseudo-kelas yang diperiksa digabungkan dengan pemilih saudara bersebelahan () untuk mengawal paparan kandungan; 2. Struktur HTML mengandungi input, label dan kandungan div untuk setiap item yang runtuh; 3. Ekspansi lancar/runtuh animasi dengan menetapkan peralihan ketinggian max; 4. Tambah ikon status terbuka/tutup dengan elemen pseudo; 5. Gunakan jenis radio untuk melaksanakan mod tunggal terbuka, manakala kotak semak membolehkan pelbagai bukaan. Ini adalah pelaksanaan menu dilipat interaktif yang tidak memerlukan JavaScript dan serasi dengan pelayar moden.

Mewujudkan CSS sahaja mengikut menu adalah cara yang baik untuk menambah kandungan interaktif tanpa bergantung pada JavaScript. Ia menggunakan :checked kotak semak pseudo-kelas yang tersembunyi, dan pemilih saudara bersebelahan ( ) untuk menukar penglihatan kandungan. Inilah cara membina satu langkah demi langkah.

1. Struktur HTML

Mulakan dengan struktur HTML yang bersih menggunakan kotak semak (atau butang radio) untuk mengawal setiap item mengikut. Setiap bahagian termasuk label (sebagai tajuk yang boleh diklik) dan div kandungan.

 <div class = "accordion">
  <div class = "accordion-item">
    <input type = "checkbox" id = "Section1" name = "accordion" />
    <label untuk = "Seksyen1"> Seksyen 1 </label>
    <div class = "accordion-content">
      <p> Ini adalah kandungan untuk Bahagian 1. </P>
    </div>
  </div>

  <div class = "accordion-item">
    <input type = "checkbox" id = "Section2" name = "accordion" />
    <label untuk = "Section2"> Seksyen 2 </label>
    <div class = "accordion-content">
      <p> Ini adalah kandungan untuk Bahagian 2. </P>
    </div>
  </div>

  <div class = "accordion-item">
    <input type = "checkbox" id = "Section3" name = "accordion" />
    <label untuk = "Section3"> Seksyen 3 </label>
    <div class = "accordion-content">
      <p> Ini adalah kandungan untuk Bahagian 3. </P>
    </div>
  </div>
</div>

Gunakan type="radio" dan bukannya checkbox jika anda hanya mahu satu bahagian dibuka pada satu masa.

2. Gaya CSS Asas

Gaya mengikut kelihatan bersih dan berfungsi. Sembunyikan input kotak semak dan gaya label sebagai tajuk yang boleh diklik.

 .accordion {
  Lebar: 100%;
  Max-Width: 600px;
  Margin: 0 Auto;
  font-family: arial, sans-serif;
}

.accordion-item {
  Sempadan-Bottom: 1px Solid #ddd;
}

.Accordion-item label {
  paparan: blok;
  Padding: 15px;
  latar belakang warna: #F5F5F5;
  Font-Weight: Bold;
  kursor: penunjuk;
  PILIH PENGGUNA: Tiada;
  Peralihan: Latar belakang warna 0.3s mudah;
}

.Accordion-item label: hover {
  latar belakang warna: #e9e9e9;
}

.Ccordion-Content {
  Max-Height: 0;
  Limpahan: Tersembunyi;
  Peralihan: Max-tinggi 0.3s mudah keluar, padding 0.3s mudah;
  Padding: 0 15px;
  latar belakang warna: #fff;
}

.accordion-content p {
  Margin: 10px 0;
}

3. Togol kandungan dengan CSS

Gunakan :checked dan (adik bersebelahan) Combiner untuk mengembangkan kandungan apabila kotak semak diperiksa.

 #Seksyen1: Label yang diperiksa. Akademik-kandungan,
#Seksyen2: Label yang diperiksa. Akal-kandungan,
#Seksyen3: Label yang disemak. Accordion-Content {
  Max-Height: 200px;
  Padding: 15px;
}

Trik max-height membolehkan pembukaan/penutupan lancar. Tetapkannya cukup tinggi agar sesuai dengan kandungan anda, tetapi tidak terlalu tinggi untuk mengelakkan animasi yang panjang.

4. Pilihan: Tambah ikon terbuka/tutup

Anda boleh menambah anak panah kecil atau plus/tolak menggunakan elemen pseudo.

 .Accordion-item label :: selepas {
  Kandungan: '';
  Terapung: betul;
}

#Seksyen1: Label yang diperiksa :: Selepas,
#Seksyen2: Label yang diperiksa :: Selepas,
#Seksyen3: Label yang disemak :: Selepas {
  Kandungan: ' -';
}

Ini memberi pengguna isyarat visual mengenai keadaan setiap bahagian.

Perkara utama untuk diingat

• Kotak semak mesti datang sebelum label dan kandungan dalam HTML untuk pemilih saudara untuk berfungsi.
• Gunakan max-height dan bukannya display: none untuk peralihan yang lancar.
• Input radio ( type="radio" ) hanya membenarkan satu item terbuka pada satu masa; Kotak semak membenarkan beberapa item terbuka.
• Kebolehcapaian: Pertimbangkan untuk menambah atribut aria-expanded dan aria-controls jika anda meningkatkan dengan JS yang minimum kemudian.

Pada asasnya, ia adalah penggunaan bijak bentuk input dan pemilih CSS untuk mensimulasikan interaksi. Tiada JavaScript diperlukan, dan ia berfungsi di semua pelayar moden.

Atas ialah kandungan terperinci Bagaimana untuk membuat menu akordion CSS sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!