Javascript 问题：重新计算父高度

我正在制作一个移动菜单。它有三个层次。当你点击一个链接时，它会向点击的链接和下一个链接添加一个开放类。我在计算ul的高度，通过循环遍历它的所有子元素，并结合每个元素的高度。这部分工作正常，我遇到的问题是，当计算第二级子级时，我也需要能够重新计算父级ul，但这需要在计算子级ul后进行，以便获得新的高度

测试用例：

单击父1

单击子1（高度不重新计算）

单击父1关闭，再次单击（高度现在已重新计算）

{
const primary=document.querySelector（“.primary”），
secondary=document.queryselectoral（“.secondary”），
children=document.queryselectoral（“.has children”）；
对于（让[i，_this]的children.entries（））{
设currentUL=secondary[i]；
_this.addEventListener（“单击”，e=>{
e、 预防默认值（）；
//切换开放类
_这个.classList.toggle（“打开”）；
currentUL.classList.toggle（“打开”）；
让children=currentUL.children，
总数=0；
for（设x=0；x

.primary{
最大宽度：500px；
保证金：0自动；
}
.小学甲{
显示：块；
填充：20px；
边框底部：1px纯色灰色；
字体大小：16px；
颜色：绿色；
}
.中学{
身高：0；
溢出：隐藏；
过渡延迟：0.3s；
过渡：高度0.3s；
左边距：38px；
}

问题是，当用户单击文本“父1”时，第一个

ul.secondary

元素高度会正确更新，但当用户单击“子1”时，第二个

ul.secondary

高度会正确更新，但第一个

ul.secondary

元素高度不会正确更新。一个可能的解决方案是重新计算父级

ul

一旦子级发生变化，我在计算父级高度之前使用了0.3秒的

超时时间，因为动画延迟

要检查我所说的，您可以使用浏览器的开发工具，选项卡“元素”，并查看在每次用户交互后如何修改元素的属性
style.height

我添加的代码在注释之后。

//这是我添加的代码。

const primary=document.querySelector（“.primary”），
secondary=document.queryselectoral（“.secondary”），
children=document.queryselectoral（“.has children”）；
对于（让[i，_this]的children.entries（））{
设currentUL=secondary[i]；
_this.addEventListener（“单击”，e=>{
e、 预防默认值（）；
//切换开放类
_这个.classList.toggle（“打开”）；
currentUL.classList.toggle（“打开”）；
计算高度（currentUL）；
//这是我添加的代码
让parentUL=currentUL.parentElement.parentElement；
if（parentUL.classList.contains（'secondary'））{
setTimeout（函数（）{
计算身高（父母）；
}, 300);
}
});
}
功能高度（UL）{
让孩子们，
总数=0；
for（设x=0；x

.primary{
最大宽度：500px；
保证金：0自动；
}
.小学甲{
显示：块；
填充：20px；
边框底部：1px纯色灰色；
字体大小：16px；
颜色：绿色；
}
.中学{
身高：0；
溢出：隐藏；
过渡延迟：0.3s；
过渡：高度0.3s；
左边距：38px；
}

谢谢。这无法正确计算父对象上的高度。@user3486427我终于让它正常工作了！：）动画中的延迟让我疯狂地进行高度计算，这就是为什么我添加了超时，以便在动画完成后进行计算。如果有任何帮助，请考虑我的答案，并将其标记为正确答案。我将不胜感激，谢谢。