Javascript 无法从toggleClass jQuery检索高度

我想得到一个被切换的类的高度。单击按钮时，将添加可见的类

。类别菜单。如果类存在，那么我想得到它的高度。但当我提醒
menuHeight
时，它是0


实际代码：

jQuery

jQuery('.topics-btn').click(function(){
  jQuery('.category-menu-wrap').toggleClass('category-menu-visible');

  if (jQuery('.category-menu-wrap').hasClass('category-menu-visible')){
    var menuHeight = jQuery('.category-menu-visible').height();
    alert(menuHeight);
    jQuery('.sidebar .content-wrap').css('margin-top', menuHeight);
  } else {
    jQuery('.sidebar .content-wrap').css('margin-top', 0);
  }

});

CSS:

为什么它不能检索高度？
从

当元素或其父元素被隐藏时，.height（）报告的值不能保证准确。要获得准确的值，请确保在使用.height（）之前元素可见

这里的问题就是：您的
。可见的类别菜单
不可见。当JQuery查找它时。这是由于在切换类上设置了具有持续时间的转换属性


更新（根据JSFIDLE）

切换类别时，除非指定了测量单位，否则在切换的类别上不会识别高度

甚至在没有转换属性的情况下也会发生这种情况

-
高度：70

-
高度：70px
您需要等待转换完成。
更新：
有一个有用的事件可以完成此操作：


jQuery（'.topics btn'）。单击（函数（）{
var$menu=jQuery（'.category menu wrap'）；
$menu.toggleClass（'category-menu-visible'）；
$menu.on（“transitionend”，函数（）{
if（jQuery（'.category-menu-wrap'）.hasClass（'category-menu-visible'））{
var menuHeight=jQuery（'.category菜单可见'）.height（）；
警报（menuHeight）；
jQuery（'.sidebar.content wrap'）.css（'margin-top'，menuHeight）；
}否则{
jQuery（'.sidebar.content wrap'）.css（'margin-top'，0）；
}
});
});
。类别菜单换行{
身高：0；
}
.类别菜单可见{
高度：70像素；
过渡：高度.3s立方贝塞尔（.27,1.76,95,1.1）；
}

点击
您遇到的问题是CSS转换。单击时，将计算高度，但此时高度为0。转换后，其值将为70px。您需要在过渡完成后获取高度

在此示例中，转换持续时间设置为
0s


jQuery（'.topics btn'）。单击（函数（）{
jQuery（'.category-menu-wrap'）.toggleClass（'category-menu-visible'）；
if（jQuery（'.category-menu-wrap'）.hasClass（'category-menu-visible'））{
var menuHeight=jQuery（'.category菜单可见'）.height（）；
警报（menuHeight）；
jQuery（'.sidebar.content wrap'）.css（'margin-top'，menuHeight）；
}否则{
jQuery（'.sidebar.content wrap'）.css（'margin-top'，0）；
}
});
。类别菜单换行{
宽度：100%；
高度：0px；
背景色：#F7D5B6；
溢出：隐藏；
过渡：高度0立方贝塞尔（.27,1.76,95,1.19）；
}
.类别菜单可见{
高度：70像素；
过渡：高度0立方贝塞尔（.27,1.76,95,1.1）；
}

.主题btn
您是否尝试过获取高度的CSS值
var menuHeight=jQuery（'.category菜单可见'）.css（“高度”）你能包括你的html吗？如果您还包括一个JSFIDLE或代码片段，那就更好了。这也不起作用。添加类别菜单换行的高度设置为0可能很重要。@Jamesmithell如果运行代码段，它会发出警报
70
-您可以运行代码段吗？是的，在这种情况下对我有效，但添加了一个JSFIDLE示例。我认为问题在于该项上已经存在的高度为0的另一个类。@Jamesmithell我更新了-我发现如果切换的类具有带单位的高度，JQuery的
height（）
函数可以工作。有趣的是，如果您在没有指定单位的情况下设置高度（即
70
而不是
70px
），它就不起作用了-我将更新我的答案好吧，这似乎是问题所在，那么我将不得不用另一种方式进行转换。
.category-menu-wrap {
  width:100%;
  height:0px;
  background-color:#F7D5B6;
  overflow: hidden;
  transition: height .5s cubic-bezier(.27,1.76,.95,1.19);
}
.category-menu-visible {
  height: 70px;
  transition: height .3s cubic-bezier(.27,1.76,.95,1.1);
}