javascript - jQuery 宽度、outerWidth()、innerWidth() 返回不正确的数据

Question

出于某种原因，我无法让 jQuery 为我提供各种元素的可靠宽度数据。这是演示问题的 fiddle 的链接: http://jsfiddle.net/snoopydaniels/ZDbaa/1/

我正在尝试创建一个多维下拉菜单。正如您在 jsfiddle 中所见，第二个嵌套菜单的位置不正确。我用来定位它的 jQuery 使用 outerWidth() 查询同级 anchor 元素以发现其宽度，然后根据返回的宽度设置嵌套列表的左侧位置。当我在 CSS 中为同级 anchor 元素设置宽度时，我会得到接近正确值的值，但如果没有该静态宽度，outerWidth() 将返回“2”。

但是即使我给 anchor 元素设置了宽度，outerWidth(true) 仍然没有正确地包含元素的边框。

我要拔头发了。为什么像这样的废话不能像宣传的那样有效？

Answer 1

各种宽度命令不适用于隐藏元素(display: none)。

如果您使用 css 设置宽度，jquery 将返回它。否则，您将得不到结果或毫无意义的结果。

经典的解决方案是将元素放置在屏幕外，检查宽度，然后将其隐藏并放回去。 (您可能会找到一个 jquery 插件，它可以在一个命令中执行此操作。)

有时有重组 html 和/或 css 的方法，因此您可以避免这种情况。

有时您可以在显示元素后立即固定大小。

您也可以尝试将 visibility 设置为 hidden，这样元素会获得一个大小，但不可见。这可能会起作用，具体取决于您的设计。