jquery - bootstrap 隐藏后更改元素高度

Question

我正在编写一个 slider 插件，但该插件在 Twitter Bootstrap 选项卡中运行。我已阅读此处发布的答案:

jQuery: Get height of hidden element in jQuery

我的插件中有以下代码，但对于不是第一个选项卡的任何选项卡，它的高度仍然为 0。

$(elem, this).css({'position':'absolute','visibility':'hidden','display':'block'});
heightVal = $(elemToChange, this).height();
$(elem, this).css({'position':'static','visibility':'visible','display':'none'});

console.log(heightVal); // Only correct for first tab.

我需要以某种方式延迟吗？ js 文件包含在 Bootstrap 之后。

Answer 1

查看您的代码，您需要更新试图从中获取高度的同一元素。看起来你使 elem 可见，但从 elemToChange 获取高度......实际上两者都应该是 elemToChange。

$(elemToChange, this).css({'display':'block'});
heightVal = $(elemToChange, this).height();
$(elemToChange, this).css({'display':'none'});

console.log(heightVal); // Only correct for first tab.

实际上，您可能只需要一个display:block。 Javascript 是单线程的，更改显示、读取高度和恢复显示应该永远不允许执行绘制循环(我相信)。另外，如果你有额外的 margin ，它可能会通过 position:absolute 丢失......这个额外的位有点依赖于它周围的代码，由于某种原因它仍然不起作用;提供 fiddler 。

尝试这样的事情:

var element = $(elemToChange, this).show();
heightVal = element.height();
element.hide();

console.log(heightVal); // Only correct for first tab.