jQuery <li> 的总和宽度问题

Question

我正在尝试制作一个如下所示的子菜单:

HTML:

<ul class="mainMenu clearfix">
    <li><a href="#">Eurodan huset</a></li>
    <li><a href="#">Hustyper</a></li>
    <li><a href="#">Galleri</a></li>
    <li><a href="#">10 byggesten</a></li>
    <li><a href="#">Huse til salg</a></li>
    <li><a href="#">Udstillinger</a>
        <ul class="underMenu">
            <li><a href="#">Salgskontorer</a></li>
            <li><a href="#">Velkommen</a></li>
            <li><a href="#">Historie</a></li>
            <li><a href="#">Fremtidens boliger</a></li>
        </ul>
    </li>
    <li><a href="#">Grunde</a></li>
    <li><a href="#">Om os</a></li>
    <li><a href="#">Katalog</a></li>
</ul>

哪里.mainMenu是大菜单和 .underMenu是主菜单中包含“underpages”的列表。为了使下菜单工作，我需要它的固定宽度(它具有绝对位置，并且 <li> 父级具有 position:relative 所以我使用 jquery 来制作它。

jQuery/JavaScript:

$('.underMenu').each(function() {
    var t = $(this),
        tW = 0;

    $('li', t).each(function() {
        tW += $(this).outerWidth(true);
    });

    t.css('width', tW);

});

按照上面的代码，我的菜单应该看起来不错(我认为的方式)，但问题是它看起来像这样:

为了使其正常工作，我需要在 .underMenu 的宽度上再添加 40px ，但我不明白问题出在哪里，因为我使用 $(this).outerWidth(true); .

根据我的想法，一切都应该正常，但正如你所看到的，事实并非如此。

CSS:

.mainMenu,
.underMenu {
    clear:both;
    line-height:29px;
    background:url(../images/transPxBlack.png) repeat left top;
    -moz-border-radius:16px;
    -webkit-border-radius: 16px;
    border-radius:16px;
    padding:0 20px;
}
.mainMenu > li {
    margin-left:16px;
    position:relative;
    font-size:13px;
}
.mainMenu > li:first-child {margin-left:0;}

.underMenu {position:absolute;}
.underMenu li {
    font-size:11px;
    margin-left:18px;
}
.underMenu li:first-child {margin-left:0;}

Answer 1

您的宽度计算是根据子 li 标记的宽度总和进行的，但它没有考虑 .underMenu 上的填充，因此您的整体宽度变短。如果添加填充，它就会起作用:

$('.underMenu').each(function(){
    var t = $(this),
        tW = 0;

    $('li', t).each(function(){
        tW += $(this).outerWidth(true);
    });

    t.css('width', tW + t.outerWidth(true) - t.width());
});

您可以在这里看到:http://jsfiddle.net/jfriend00/CTuz3/