Maison > Questions et réponses > le corps du texte
J'ai eu ça (très simple) :
<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>
Je souhaite écrire un menu déroulant qui s'ouvre avec une transition. La hauteur passera donc de 0 à 100 pixels en une seconde de transition.
Je pense donc que changer de classe de dropdownList
est un bon moyen. Ai-je raison? D'abord, il obtient la classe avec une hauteur de 0, et après avoir cliqué sur la flèche, il obtient la classe avec une hauteur plus élevée.
Ma question : Comment basculer cette classe en utilisant un événement de clic sur la flèche ?
P粉6765887382024-04-01 20:06:25
Comme on ne sait pas quelle version de Vue vous utilisez, je suppose que vous utilisez vue3+.
Dans la balise script, ajoutez le Ref à référencer dans la section template. Puisque vous vérifiez uniquement si le bouton a été cliqué, utilisez le type booléen.
const isActive = ref(false)
Utilisez ensuite la liaison de classe (ajoutez la valeur de :
),通过使用 JS ternaire
En gros, si isActive
为 true,它将把 active-dropdown-list
放在该元素上,否则它将是 inactive-dropdown-list