用于兄弟姐妹时，Outerwidth() 函数返回 0

Question

我有 4 个不同的 div 带有图像缩略图。对于缩略图单击，我创建了一个 jQuery 脚本来放大图像。放大图像适用于第一页 #C1，但其余页面 outerWidth 返回 0。因此，放大图像未按预期显示。类 collection-column 在 CSS 中设置为 display: none。单击下拉菜单时，我使用fadeOut() 隐藏其所有同级，并显示当前的#(href 属性)。我不能使用visibility:hidden，因为它完全隐藏了页面。

如何将outerWidth() 函数用于所有其他页面。

<div class="collection-column" id = "#c1">....</div>
<div class="collection-column" id = "#c2">....</div>
<div class="collection-column" id = "#c3">....</div>
<div class="collection-column" id = "#c4">....</div>

有人遇到过类似的问题吗？请帮忙！！

Answer 1

有一个解决此问题的方法，将位置设置为绝对位置并将元素移动到不可见区域。然后得到它的尺寸并恢复原来的位置。

var getStyle = function (el, prop) {
    if (typeof getComputedStyle !== 'undefined') {
        return getComputedStyle(el, null).getPropertyValue(prop);
    } else {
        return el.currentStyle[prop];
    }
}

var getOuterWidth = function(element){
   var originalDisplay = getStyle(element.get(0), "display");
   if(originalDisplay == "hidden"){
       var originalPos = getStyle(element.get(0), "position");
       var originalLeft = getStyle(element.get(0), "left");
       var originalTop = getStyle(element.get(0), "top");
       element.css({ top : -10000, left: -10000, position: "absolute", display: "block"  });
    }

    var outerWidth = element.outerWidth();

    if(originalDisplay == "hidden"){
        element.css({ top : originalTop, left: originalLeft, position: originalPosition, display: originalDisplay });
    }

    return outerWidth;
}

用法：

getOuterWidth($("#c4"));