Rumah > Soal Jawab > teks badan
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粉6765887382024-04-01 20:06:25
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