jQuery未根据总li宽度重置nav元素宽度

Question

我需要动态调整下拉菜单主导航栏的大小，以便调整大小以适应导航菜单项名称中不同长度的字符。以下是我到目前为止的代码：

 $(document).ready(function(){
            var wNav = $("#navigation").outerWidth();
            var wLiTotal = 0;
            $("#navigation>ul>li").each(function(){
                wLiTotal += $(this).outerWidth();
                if((wLiTotal > wNav)||(wLiTotal < wNav)){
                 wNav = wLiTotal +3;
             };
          });    
       });

问题是，尽管我得到了所有li的总宽度，但由于某种原因，它没有将wNav重置为该宽度，我不知道为什么。提前感谢您的帮助。

Answer 1

$(document).ready(function() {
    var wNav = $("#navigation").outerWidth();
    var wLiTotal = 0;
    $("#navigation>ul>li").each(function() {
        wLiTotal += $(this).outerWidth();
        if ((wLiTotal > wNav) || (wLiTotal < wNav)) {
            wNav += wLiTotal + 3;  // you've increase wNav with its previous value
        };
    });
    $("#navigation").width(wNav); // set new wNav as new width
});

Answer 2

这是因为您只计算外套宽度而不设置。

$(document).ready(function(){
            var wNav = $("#navigation").outerWidth();
            var wLiTotal = 0;
            $("#navigation>ul>li").each(function(){
                wLiTotal += $(this).outerWidth();
                if((wLiTotal > wNav)||(wLiTotal < wNav)){
                 wNav = wLiTotal +3;
             };
            //setting outer width
            $("#navigation").outerWidth(wNav);
          });    
       });

使用这个插件jquery.dimensions.ec.jshttp://bitovi.com/blog/2010/06/set-inner-outer-width-height-with-jquery-dimensions-etc-plugin.html