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".

Answer 1

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%);
}

<div class="submenu_accordion">
  <div class="tabs">
    <div class="tab">
      <input type="checkbox" id="chck1">
      <label class="tab-label" for="chck1">Item 1</label>
      <div class="tab-content">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis!
      </div>
    </div>
  </div>
</div>