Question

我试图根据子li元素宽度设置嵌套绝对定位ul的宽度。假设所有元素都向左浮动并显示块。

这是一个下拉导航，因此只显示一个嵌套的ul。

将nest ul元素的宽度设置为0。

HTML

<ul>
  <li> <span></span>
     <ul>
        <li>link</li>
        <li>link</li>
     </ul>
  </li>

  <li> 
     <ul><span>link</span>
        <li>link</li>
        <li>link</li>
     </ul>
  </li>
</ul>

的jQuery

$(window).load(function() {
    $('ul li ul').each(function() {
        var width = 0;
        $(this).children('li').each(function() {
            width += $(this).outerWidth(true);

        });
            $(this).width(width);
    });
});

CSS

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul li:hover ul {
    display: block;
}

ul li {
    float: left;
}

ul ul {
    display: none;

}

Answer 1

问题似乎是您隐藏了内部ul元素，因此在计算宽度时，这些元素不会显示，因此它不会有任何尺寸。

一种可能的解决方案是使用

等定位隐藏它

ul ul {
    display: none;
}
ul ul.preload {
    display: block;
    position: fixed;
    left: -10000px;
}

然后

$(window).load(function () {
    $('ul li ul').each(function () {
        var width = 0;
        $(this).children('li').each(function () {
            width += $(this).outerWidth(true);

        });
        $(this).width(width);
    });
    $('ul.preload').removeClass('preload')
});

演示：Fiddle

在子元素宽度之后设置绝对元素的宽度

1 个答案: