jquerywidth（）；问题

长话短说，我正在构建一个工具，当响应性网站上的表不适合时，可以将它们隐藏起来。我遇到了一个奇怪的虫子，我希望有人能把它弄清楚。当表被隐藏时，jQuery突然决定将其宽度增加20px。如果屏幕再次变宽，这将阻止我进行计算以重新显示表格。我将把代码放在下面，但请查看JSFIDLE以更好地了解发生了什么：

//检查表对于视口是否太大。
函数tableChecker（）{
$（“.rwd表”）。每个（函数（）{
var wrapWidth1=parseInt（$（this.parent（）.width（）），
tableWidth=parseInt（$（this）.outerWidth（））；
$（'#debug'）.html（'包装宽度：'+wrapWidth1+'px表格宽度：'+tableWidth+'px'）；
if（宽度1<表宽）{
var finaltableWidth=$（this）.outerWidth（）；
$（this.next（'.viewtable'）.show（）；
$（this.hide（）；
}
});
}
//调用页面加载和调整页面大小
tableChecker（）；
$（窗口）。调整大小（函数（）{
tableChecker（）；
});

---

顺便说一句，我在Chrome 31上看到了这一点。

好吧，在永远搞乱了这一点之后，我决定这是一个错误，当你尝试测量隐藏对象的宽度时会发生。我的解决方法是让对象保持可见，然后将其放入高度为0、溢出为隐藏的容器中。这提供了正确的宽度。

我想我有东西给你，它看起来像是当一个元素有

显示：无该查询在后台执行一些额外的操作，允许它“猜测”高度/宽度

相关的：

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

运行这个提琴，查看chrome开发工具和控制台
小提琴：

CSS:

JS:

HTML:

你好
你好
点击我

我没有看到检查

wrapWidth1>=tableWidth

的

else

语句。这会有帮助吗？函数应该在初始if语句之后停止，但它不会停止，因为jQuery正在计算隐藏表上的额外像素。仅供参考-这是一个简化的测试用例。我的完整代码可以在这里看到，如果它有任何帮助的话：删除

.viewtable

上的水平填充怎么样？一点调试：如果删除html，body上的填充，它就会消失。不是一个bug。预期的行为。另一种常见的方法是

位置：绝对；左：-999em。有趣的是，我假设一个隐藏对象的宽度为NaN。我很好奇它是如何“猜测”的，以及是否有任何方法可以帮助它更准确地猜测。不确定它现在是如何做到的，但另一个主题确实触及了这个过程，我打赌它仍然使用交换方法，并试图根据元素的适合程度来判断。
// 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();

});

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

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());
});

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

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