vue中写一个垂直下拉菜单，利用max-height属性

工作需求需要写一个垂直下拉菜单然后我就自己在vue里面写了一个菜单代码在下面仅供参考。template div div idbiao clickopen(nei1)标题1/div ul refnei1 li内容1/li li内容2/li li内容3/li /ul div idbiao clickopen(nei2)标题2/div ul refnei2 li内容1/li li内容2/li li内容3/li /ul div idbiao clickopen(nei3)标题3/div ul refnei3 li内容1/li li内容2/li li内容3/li /ul /div /template script export default { data() { return { flag :true, } }, methods:{ open(n) { console.log(this.$refs[n].style.maxHeight) if(this.$refs[n].style.maxHeight) { this.$refs[n].style.maxHeight 600px; this.$refs[n].style.transition max-height .3s; console.log(1) } else { this.$refs[n].style.maxHeight ; this.$refs[n].style.transition ; console.log(2) } } } } /script style scoped #biao { width: 200px; height: 50px; background-color: aquamarine; border: 1px solid #eeeeee } ul { margin: 0; padding: 0; max-height: 0; overflow: hidden; -webkit-transition: max-height .3s; transition: max-height .3s; } /* .open { max-height: 600px; -webkit-transition: max-height .3s; transition: max-height .3s } */ ul li{ width: 200px; height: 35px; background-color: blueviolet; list-style: none; } /style本来想用类添加但发现如何给元素添加和删除类是个问题网上的用类绑定这种方法还是太麻烦也达不到我想要的那种全部能一起打开的效果所以我就利用refs去获取这个元素的style然后增加样式来达到动画效果当你想打开的时候你给ul加上 max-height: 600px; -webkit-transition: max-height .3s; transition: max-height .3s 当你想关闭的时候你就给ul加上 max-height: ; transition: max-height .3s这样就可以了至于为什么用this.$refs[n].style.maxHeight’这个来判断呢是因为你一开始设置max-height为0的时候你用ref去获取得到的为空你只需要判断你点的这个元素的max-height是否为空是的话就加样式不是的话就减去样式就可以当然用jq来做最简单直接加上类但是在vue里面还是没这种方法有什么更好的办法可以留言告诉我。