Question

我正在制作下拉窗口小部件的过程。向下扩展的菜单设置为与父级相同的宽度（使用jQuery）。

窗口小部件按预期工作，但是，将它放在DIV容器中，初始显示设置为none。显示此容器时，根据jQuery的所有下拉宽度均为零... 如果默认显示容器，则一切正常。

希望我的小提琴能更好地说明我的意思：http://jsfiddle.net/ruFzR/ 在结果窗格中;顶部下拉列表位于容器外部，底部位于容器内部。除了一些明显的样式问题外，宽度还没有扩大。

Answer 1

您可以使用display: none;来避免visibility: hidden;导致的宽度问题。使用visibility: visible;使其可见。

元素保持在您的内容流（相同大小等）内，而它只是不可见。

Answer 2

如果您需要隐藏某些内容的宽度而无法以任何理由取消隐藏它，您可以克隆它，更改CSS以使其显示在页面外，使其不可见，然后测量它。如果用户隐藏并在之后删除，则用户将不再聪明。

示例：

$itemClone = $('.hidden-item').clone().css({
        'visibility': 'hidden',
        'position': 'absolute',
        'z-index': '-99999',
        'left': '99999999px',
        'top': '0px'
    }).appendTo('body');
var width = $itemClone.width();
$itemClone.remove();

Answer 3

.width（）由浏览器处理，这就是为什么你用“0”尝试使用属性而不是

 $('#elt').attr('width');

Answer 4

从示例中我不确定问题是什么..

但你应该用

设置（在那个例子中）

.splitButton2 > div{width:100%;}

这相当于你写jQuery代码，没有缺点（宽度为0，如果元素是display:none，JavaScript的依赖），并在浏览器上更容易..

Answer 5

如果您要使用display:none:，则必须首先显示菜单，计算宽度，然后隐藏它。或者，您可以使用绝对定位隐藏，这应该自元素绘制以来正确报告宽度。示例：position: absolute; top: -999em;

CSS：当显示设置为none时没有DIV宽度

5 个答案: