Javascript 非jQuery：即使最大高度为零也获取高度

此代码运行良好

我在这里所做的是夸大活动类的最大高度，但我需要的是指定确切的高度，以便能够以相同的速度运行效果

对于这个例子。我没有编写动态导航栏，这是缺乏条件的，但我认为它涵盖了我想要指定的内容

如果单击w33racle，您将在控制台中看到一个数字。但是，0不是我需要的值。我希望它是ul.dropdown.active的高度，无论它是否具有.active类

让test\u clicker=document.getElementById（'testClicker'）；
test_clicker.onclick=（e）=>{
设self=e.target | | e.src元素，
s_s=self.nextElementSibling.classList；
s_s.包含（'active'）？s_s.删除（'active'）：s_s.添加（'active'）；
log（self.nextElementSibling.clientHeight）；
}

。下拉列表{
最大高度：0；
溢出：隐藏；
转换：所有0.3都易于输入输出；}
.dropdown.active{
最大高度：500px；}

w33racle

这个

是

对于

样本

只有

这里的问题是JavaScript在CSS转换完成之前完成

一个快速修复方法是删除CSS转换，或者添加一个延迟等于CSS转换长度的setTimeout。但是，如果合适，我建议使用transitionend事件

使用实现示例进行编辑：

让test\u clicker=document.getElementById（'testClicker'）；
test_clicker.onclick=（e）=>{
设self=e.target | | e.src元素，
s_s=self.nextElementSibling.classList；
s_s.包含（'active'）？s_s.删除（'active'）：s_s.添加（'active'）；
}
document.queryselectoral（“ul.dropdown”）.forEach（函数（元素）{
元素。addEventListener（“transitionend”，function（）{
console.log（element.clientHeight）；
console.log（“转换结束”）
});
});
。下拉列表{
最大高度：0；
溢出：隐藏；
转换：所有0.3都易于输入输出；}
.dropdown.active{
最大高度：500px；}


w33racle

这个

是

对于

样本

只有



通过增加孩子们的身高，你可以很容易地得到它

利用javascript提供的功能。在这种情况下，不需要
animationend


让test\u clicker=document.getElementById（'testClicker'），
这是高度=0；
test_clicker.onclick=（e）=>{
这是高度=0；
设self=e.target | | e.src元素，
s_s=self.nextElementSibling.classList；
s_s.包含（'active'）？s_s.删除（'active'）：s_s.添加（'active'）；
[]forEach.call（self.nextElementSibling.children，（elem）=>{
这是高度+=elem.clientHeight；
});
console.log（这是高度）；
}
。下拉列表{
最大高度：0；
溢出：隐藏；
转换：所有0.3都易于输入输出；}
.dropdown.active{
最大高度：500px；}


w33racle

这个

是

对于

样本

只有



过渡
是一条路要走。您不应该也不能信任超时来确保转换的正确性ended@HermLuna-当然，在添加类之前，高度仍然为0。。。请看我编辑的答案，也许现在我的意思已经很清楚了？@HermLuna-再次编辑以纠正错误。如果页面上有多个下拉列表，我会使用querySelectorAll，但这只是一个示例来说明我的意思。您说过希望它始终为您提供ul.dropdown的高度，它会动态变化。你不是说你一直想让它给你扩展的高度。ul.dropdown的高度并不总是180。当它没有.active类时，高度实际上是0。如果另一个答案是你想要的，我现在理解你的问题，不用担心我会说，“我希望它是ul.dropdown.active的高度，无论它是否具有.active类”