recherche

Maison  >  Questions et réponses  >  le corps du texte

Vue : transition du menu déroulant et comment changer de classe d'un autre élément

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粉754473468P粉754473468231 Il y a quelques jours439

répondre à tous(1)je répondrai

  • P粉676588738

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

    Réponse : Utiliser la liaison de classe

    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

    répondre
    0
  • Annulerrépondre