jquery - 获取带有父显示器的div的宽度: none in Jquery Tab Control

Question

我有一个 jquery 选项卡控件，在其中构建一个我创建的自定义控件，该控件需要在构建过程中知道其自身的宽度。

我的问题是，当放入父容器(在本例中是一个带有“display: none”的选项卡)时，我无法计算宽度。

我已经在我的控制范围内尝试了两种方法:

$('.DataRow').width()
$('.DataRow').css('width')

都返回 0。

还有其他方法可以得到这个宽度值吗？

Answer 1

我经常使用这种visibility:hidden技术。您可以在 visibility:hidden 时测试宽度，但不能在 display:none 时测试宽度。两者都隐藏元素的可见性，但是 display:none 的行为不同，因为它不占用 DOM 中的任何“空间”。

鉴于此标记:

<div id="parent" style="display: none">
    <div> find my width </div>
</div>

测试宽度:

$('#parent').css('visibility', 'hidden').show();
var w = $('#parent div').width();
$('#parent').css('visibility', 'visible').hide();
console.log('width: ', w);

输出:

> width:  496

Proof

更新:

使用 jQuery UI 选项卡，您可以执行以下操作:

$('#tabs-3').css('visibility', 'hidden').removeClass('ui-tabs-hide');

其中 '#tabs-3' 是隐藏选项卡。请参阅this fiddle了解更多信息。