Penggunaan menu lungsur dalam menu gelongsor

Question

Saya mengalami sedikit kesukaran untuk mencari cara untuk menambah submenu atau lungsur turun dalam bahagian menu gelongsor saya. Selain itu, saya tidak pasti cara melaraskan menu lungsur turun apabila bahagian lain (Text2 dan Text3) menyesuaikan diri dengan skrin.

Bolehkah sesiapa membantu saya menyelesaikan masalah ini? Terima kasih banyak atas bantuan!

Saya ingin menambah menu lungsur dalam "Teks 1".

P粉008829791 · Answer

Akordion ini sepatutnya berfungsi. Saya cuba untuk memastikan ia semudah mungkin untuk mengelakkan kekacauan kod. Anda boleh menjadikannya lebih cantik dan mesra pengguna dengan menambahkan ikon di sebelah kanan label... Untuk ini saya telah meletakkan pautan codepen saya di sini

input {
  display: none;
}

.tabs {
  overflow: hidden;
}

.tab {
  overflow: hidden;
}

.tab-label {
  display: flex;
  justify-content: space-between;
  padding: 1em;
  background: #2c3e50;
  font-weight: bold;
  cursor: pointer;
  color:white;
}

.tab-content {
  max-height: 0;
  padding: 0 1em;
  color: #2c3e50;
  background: white;
  transition: all 0.35s;
  border: 2px solid transparent;
}

input:checked~.tab-content {
  max-height: 100vh;
  padding: 1em;
  border: 2px solid black;
}

input:checked+.tab-label {
  background: darken(#2c3e50, 10%);
}


  
    
      
      Item 1
      
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis!