Question

我试图在菜单中找到所有“li”元素的总外部宽度，但我的代码似乎不起作用所以我想知道是因为父UL元素设置为不显示？

如果是这样的话怎么解决这个问题？

<ul>
<li>menu item 1</li>
<li>menu item 2<ul>
     <li>sub menu item 1</li>
     <li>sub menu item 2</li>
</ul></li>
</ul>

很明显，我的子菜单项设置为显示无，直到它悬停在上面。

我的JS就像这样

var totalWidth = 0;
jQuery("ul ul li").each(function() {
     totalWidth += jQuery(this).outerWidth();
});
alert(totalWidth);

当我提醒它时，它总是为零......

Answer 1

无论如何，你可以破解它的方式......：

var totalWidth = 0;
jQuery("ul ul").show();
jQuery("ul ul li").each(function() {
     totalWidth += jQuery(this).outerWidth();
});
jQuery("ul ul").hide();
alert(totalWidth);

不确定您是否隐藏了ul ul选择器但是看到了系统？

一些CSS黑客可能：

http://jsfiddle.net/ywtBH/

http://jsfiddle.net/ywtBH/2/

http://jsfiddle.net/ywtBH/5/

聊天后：

解决方案是放white-space:none;和......见：http://jsfiddle.net/dGhAp/2/

使用float:left;

--- PARENT ---------------------
|------------------------       |
|   elem1   |   elem2   |       |
|           |           |       |
|           |           |       |
-------------------------
    elem3   |
            |
            |
-------------

使用display:inline-block;

--- PARENT ---------------------
|-------------------------------|---
|   elem1   |   elem2   |elem3  |   |
|           |           |       |   |
|           |           |       |   |
------------------------------------

Answer 2

问题不在于枚举，而是外部宽度为所有枚举元素返回零的事实，因为它们不会显示。

如果您可以更改隐藏UL元素的方式以使用visibility: hidden而不是display: none，则outerWidth应返回实际宽度，这将解决您的问题。

Answer 3

这个功能是什么？您可以使用top：999999px等菜单将菜单项放在屏幕上，这样用户就不会看到它而是隐藏它。通过这样做，jquery可以选择宽度。悬停事件的一部分是设置/删除顶部样式，使其按预期定位。

JQuery的每个函数都可以用在隐藏的DOM对象上吗？

3 个答案: