jQuery outerHeight用于隐藏元素

获取列表项的外部高度时遇到问题 – 类似于下面的post： jQuery：获取jQuery中隐藏元​​素的高度

这是我的代码：

function tabload() { $('.tab li:first-child').addClass('selected'); $(".tab ul").css({ 'position': 'absolute', 'visibility': 'hidden', 'display': 'block'}); var h = $(".tab ul").outerHeight(true); $(".tab ul").css("height", h); $(".tab ul").css({'position': 'relative', 'visibility': 'visible', 'display': 'none' }); }; 

难道我做错了什么？

Answer 1

我之前有关于此问题的博客，因为在stackoverflow上还有一些其他类似的问题。 看看这篇博客文章中的代码

我最初只是为宽度方法开发它，但基于注释，代码已经发展到包括内/外维度。

Answer 2

您可能无法在所有浏览器中获得隐藏（display：none;）元素的高度/宽度。 尝试显示元素并在获得高度后隐藏它。

 function tabload() { $('.tab li:first-child').addClass('selected'); $(".tab ul").show(); var h = $(".tab ul").outerHeight(true); $(".tab ul").css("height", h); $(".tab ul").css({'position': 'relative', 'visibility': 'visible', 'display': 'none' }); }; 

Answer 3

如果你正在使用display：none，你可以考虑使用绝对位置和一些巨大的余量。 例如：position：absolute; left：-999999px; 代替。

Answer 4

我认为你的visibility和display visibility令人困惑。 visibility显示页面上元素的空间，但实际上并不呈现它。 display: none不会显示元素或填充的空间。

所以当你设置

 $(".tab ul").css({'position': 'relative', 'visibility': 'visible', 'display': 'none' }); 

你实际上完全隐藏了这个元素