Question

长话短说，我正在构建一个工具来隐藏响应式网站上的表格。我遇到了一个奇怪的错误，我希望有人可以透露一下。当表被隐藏时，jQuery突然决定在其宽度上添加20px。如果屏幕再次变宽，这使我无法进行计算以重新显示表格。我将把代码放在下面，但请查看jsFiddle以更好地了解正在发生的事情：

http://jsfiddle.net/kthornbloom/mSAxJ/1/

// Check if table is too big for viewport. 
function tableChecker() {
    $(".rwd-table").each(function () {
        var wrapWidth1 = parseInt($(this).parent().width()),
            tableWidth = parseInt($(this).outerWidth());
        $('#debug').html('<font color="red">Wrapper Width:</font> ' + wrapWidth1 + 'px <font color="blue">Table Width:</font>' + tableWidth + 'px');
        if (wrapWidth1 < tableWidth) {
            var finaltableWidth = $(this).outerWidth();
            $(this).next('.viewtable').show();
            $(this).hide();
        }
    });
}


// Call on page load and page resize
tableChecker();
$(window).resize(function () {
    tableChecker();

});

顺便说一句，我在Chrome 31中看到了这个。

Answer 1

好吧，在经历了这个问题之后，我已经确定当你尝试测量隐藏物体的宽度时会发生这样的错误。我的解决方法是将对象保持可见，并将其放在高度为0的容器中，并溢出：隐藏。这提供了正确的宽度。

Answer 2

认为我有适合你的东西，看起来当某个元素有display: none;时，查询会在后台执行一些额外的操作，以便“猜测”高度/宽度

相关：jQuery: height()/width() and "display:none"

除非元素具有特定的大小，否则hide（）会将其宽度/高度设置为auto，然后必须猜测这些大小。

运行此小提琴并查看chrome dev工具和控制台小提琴：http://jsfiddle.net/Culyx/aN6x7/2/

CSS：

#one{
    background-color: red;
    height: 50px;
    width: 50px;
}
#two{
    background-color: blue;
}
#clickMe{
    background-color: green;
    height: 50px;
    width: 50px;
}

JS：

console.log($("#one").height());
console.log($("#one").width());

console.log($("#two").height());
console.log($("#two").width());

$("#clickMe").click(function(){
    $("#one").hide();
    $("#two").hide();

    console.log("Now they're hidden");
    console.log($("#one").height());
    console.log($("#one").width());

    console.log($("#two").height());
    console.log($("#two").width());
});

HTML：

<div id="one">Hello</div>
<div id="two">Hello</div>

<div id="clickMe">Click Me</div>

jQuery width（）;问题

2 个答案: