Jquery CSS：显示设置为无时无DIV宽度

我正在制作一个下拉小部件。向下展开的菜单设置为与父菜单相同的宽度（使用jQuery）

小部件按预期工作，直到您将其放置在初始显示设置为“无”的DIV容器中。显示此容器时，根据jQuery的所有下拉宽度均为零。。。 如果默认情况下显示容器，则所有操作都有效

希望我的小提琴能更好地说明我的意思： 在结果窗格上；顶部下拉列表位于容器外部，底部位于容器内部。除了一些明显的样式问题外，宽度没有扩展。

浏览器会处理.width（），这就是为什么您会得到“0”，请尝试使用该属性

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

---

从这个例子中，我不确定问题出在哪里

但是（在那个例子中）你应该

---

这相当于您编写的jQuery代码，没有缺点（如果元素是

display:none

，javascript依赖项，则宽度为0），并且在浏览器上更容易使用。

如果要使用

display:none:

，则必须首先显示菜单，计算宽度，然后隐藏它。或者，可以使用绝对定位进行隐藏，因为元素已绘制，所以绝对定位应正确报告宽度。示例：

位置：绝对；顶部：-999em

您可以避免由

显示：无引起的宽度问题使用
可见性：隐藏取而代之。使用
可见性：可见以使其可见

元素保留在内容流中（大小相同，等等），而它只是不可见的。
如果您需要隐藏的内容的宽度，并且由于任何原因无法取消隐藏，您可以克隆它，更改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();

这可以通过cssYep简单地完成。我不会这样做的。最多，我会使用js来制作动画，或者显示/隐藏方法。这会读回
width
属性，但是正如你在他的标记中看到的，他没有设置一个。
$itemClone = $('.hidden-item').clone().css({
        'visibility': 'hidden',
        'position': 'absolute',
        'z-index': '-99999',
        'left': '99999999px',
        'top': '0px'
    }).appendTo('body');
var width = $itemClone.width();
$itemClone.remove();