Question

我正在编写一个滑块插件，但该插件在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文件。

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是单线程的，更改显示，读取高度并恢复显示应该永远不允许绘制周期甚至执行（我相信）。此外，如果你有额外的余量，它可能会因为position:absolute而丢失......这个额外的位稍微依赖于它周围的代码，出于某种原因如果它仍然不起作用;提供一个小提琴手。

尝试这样的事情：

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

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

Answer 2

使用此

$('#mytab a[href="#tab2"]').on('shown.bs.tab', function (e) {
//my tab is your tab header id and tab2 is non-active tab id
});

引导程序隐藏后更改元素高度

2 个答案: