Javascript 在动画侧边栏中隐藏子菜单

我正在尝试使用CSS和JS创建一个动画侧边栏，但是我在隐藏子菜单方面遇到了一个问题（图中为绿色）。因此，子菜单应该像现在一样缓慢弹出，但只有在父菜单悬停时才会弹出。目前，他们总是在场。此外，悬停的

下方的列表项应适当向下移动。在这种情况下，当“事务”悬停时，“事务”子菜单应缓慢显示并占用空间，以便“预算”相应向下移动。我尝试了

display:none和
显示：块但是我已经读到动画在
显示属性上不起作用，并且无法使其工作，我真的希望保留动画。我也尝试过一些具有
可见性的东西，但失败了，不值得一提


document.addEventListener（'DOMContentLoaded'，（）=>{
让listItems=document.querySelectorAll（'nav>ul>li'）；
函数onListItemClick（）{
for（让listItem成为listItems中的listItem）{
listItem.classList.remove（'active'）；
listItem.children[0].classList.remove（'dot'）；
如果（listItem.children.length>2）{
listItem.children[2].style.display='none'；
}
}
this.classList.add（'active'）；
this.children[0].classList.add（'dot'）；
如果（this.children.length>2）{
this.children[2].style.display='block'；
}
}
forEach（函数（listItem）{
listItem.addEventListener（'click'，onListItemClick）；
});
});
。侧栏{
背景色：#F2F2；
宽度：300px；
身高：100%；
位置：固定；
字体系列：无衬线；
}
.侧边栏>导航>ul{
列表样式：无；
线高：2米；
填充：0；
保证金：10em0；
}
.侧栏>导航>ul>li{
显示：网格；
网格模板列：25px 1fr；
颜色：#9595；
字号：18px；
}
.sidebar>nav>ul>li>span:n个子项（1）{
左边距：3em；
}
.sidebar>nav>ul>li>span:n个子项（2）{
填充：0.5em 0.5em 3em；
}
.侧栏>导航>ul>li:悬停{
颜色：#7575；
字体大小：粗体；
光标：指针；
}
.侧边栏>导航>保险单>保险单>保险单{
z指数：9；
位置：绝对位置；
列表样式：无；
填充：0；
保证金：0；
宽度：300px；
变换：translateY（0）；
过渡：均为0.5缓；
}
.侧边栏>导航>保险单>保险单：悬停>保险单{
转化：translateY（30%）；
过渡：所有0.5s缓解；
}
.侧栏>导航>ul>li>ul>li{
显示：块；
框大小：边框框；
背景色：#33ad93；
字体大小：14px；
宽度：100%；
字体大小：正常；
填充：05.5em；
}
.sidebar>nav>ul>li>ul>li：第一个孩子{
填充：0.5em 0.5 em；
}
.sidebar>nav>ul>li>ul>li：最后一个孩子{
填充：0.5微米5.5微米；
}
.sidebar>nav>ul>li>ul>li:not（：第一个孩子）：not（：最后一个孩子）{
填充：0.15em 0.15em 5.5em；
}
.侧边栏>导航>ul>li>ul>li>a{
颜色：白色；
}
.侧边栏>导航>ul>li>span>a{
颜色：#9595；
文字装饰：无；
}
多特先生{
边界半径：50%；
背景色：#33ad93；
宽度：10px；
高度：10px；
显示：内联块；
保证金：自动；
}
.主动{
颜色：黑色！重要；
字体大小：粗体；
}





交易


查看交易记录



预算


我做了一些小改动，似乎可以满足您的要求：

.sidebar>nav>ul>li>ul{
z指数：9；
/*位置：绝对；*已删除*/
高度：0；/*已添加*/
列表样式：无；
填充：0；
保证金：0；
宽度：300px；
/*变换：translateY（0）；*已删除*/
/*过渡：所有0.5轻松；*已删除*/
溢出-y:隐藏；/*已添加*/
}
.侧边栏>导航>保险单>保险单：悬停>保险单{
/*变换：translateY（30%）；*已删除*/
高度：80px；/*已添加*/
过渡：高度0.5s缓和；/*修改*/
}
.侧栏>导航>ul>li>ul>li{
高度：40px；/*已添加*/
显示：块；
框大小：边框框；
背景色：#33ad93；
字体大小：14px；
宽度：100%；
字体大小：正常；
填充：05.5em；
}

因此，我为每个新下拉列表项添加了一个静态高度40px，然后将容器设置为80px。然后我们转换高度而不是Y位置。如果您希望它相对于元素的数量是动态的，不幸的是，它不像使用
height:100%
而不是
height:80px
那么容易（您需要使用一些javascript来动态设置相对于列表项数量的高度；它仍然可以工作，但是转换会稍微中断）

希望这能给您一个想法，尽管您刚刚错过了默认
ul
转换的单元

这里是更新的代码


document.addEventListener（'DOMContentLoaded'，（）=>{
让listItems=document.querySelectorAll（'nav>ul>li'）；
函数onListItemClick（）{
for（让listItem成为listItems中的listItem）{
listItem.classList.remove（'active'）；
listItem.children[0].classList.remove（'dot'）；
如果（listItem.children.length>2）{
listItem.children[2].style.display='none'；
}
}
this.classList.add（'active'）；
this.children[0].classList.add（'dot'）；
如果（this.children.length>2）{
this.children[2].style.display='block'；
}
}
forEach（函数（listItem）{
listItem.addEventListener（'click'，onListItemClick）；
});
});
。侧栏{
背景色：#F2F2；
宽度：300px；
身高：100%；
位置：固定；
字体系列：无衬线；
}
.侧边栏>导航>ul{
列表样式：无；
线高：2米；
填充：0；
保证金：10em0；
}
.侧栏>导航>ul>li{
显示：网格；
网格模板列：25px 1fr；
颜色：#9595；
字号：18px；
}
.sidebar>nav>ul>li>span:n个子项（1）{
左边距：3e