cari

Rumah  >  Soal Jawab  >  teks badan

Vue: Peralihan menu lungsur turun dan cara menukar kelas elemen lain

Saya mendapat ini (sangat mudah):

<div class="dropdownMenuWrapper">
  <ul class="dropdownMenu">
    <li class="dropdownMenuItem"> Menu 1 </li>
    <button class="arrow" @click="toggleActive">></button>
  </ul>
</div>

<div class="dropdownListWrapper">
  <ul class="dropdownList">
    <li class="dropdownItem">DropdownItem</li>
    <li class="dropdownItem">DropdownItem</li>
    <li class="dropdownItem">DropdownItem</li>
  </ul>
</div>

Saya ingin menulis menu lungsur turun yang dibuka dengan peralihan. Jadi ketinggian akan berubah dari 0 hingga 100 piksel dalam peralihan 1 saat.

Jadi saya rasa menukar kelas dropdownList adalah pendekatan yang baik. Adakah saya betul? Mula-mula ia mendapat kelas dengan ketinggian 0, dan selepas mengklik anak panah ia mendapat kelas dengan ketinggian yang lebih tinggi.

Soalan saya: Bagaimana untuk menogol kelas ini menggunakan acara klik pada anak panah?

P粉754473468P粉754473468231 hari yang lalu437

membalas semua(1)saya akan balas

  • P粉676588738

    P粉6765887382024-04-01 20:06:25

    Jawapan: Gunakan class binding

    Memandangkan versi Vue yang anda gunakan tidak jelas, saya menganggap anda menggunakan vue3+.

    Dalam tag skrip, tambahkan Ref untuk dirujuk di bahagian templat. Memandangkan anda hanya menyemak sama ada butang telah diklik, gunakan jenis boolean.

    const isActive = ref(false)
    

    Kemudian gunakan pengikatan kelas (tambah nilai :),通过使用 JS ternary

    Pada asasnya, jika isActive 为 true,它将把 active-dropdown-list 放在该元素上,否则它将是 inactive-dropdown-list

    balas
    0
  • Batalbalas