I got this (very 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>
I want to write a dropdown menu that opens with a transition. So the height will change from 0 to 100 pixels in a 1 second transition.
So I think switching the class of dropdownList is a good way. Am I right? First it gets the class with a height of 0, and after clicking the arrow it gets the class with a higher height.
My question: How to toggle this class using click event on arrow?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Answer: Use class binding
Since it's not clear which Vue version you are using, I assume you are using vue3.
In the script tag, add the Ref to be referenced in the template section. Since you are only checking if the button was clicked, use boolean type.
Then use class binding (add
:in front of the class attribute) by using isActive Conditionally put classes on tags en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator" rel="nofollow noreferrer">JS ternaryBasically, if
isActiveis true, it will putactive-dropdown-liston that element, otherwise it will beinactive-dropdown-list