2012-07-31 35 views
1

我需要動態調整我的下拉菜單主導航欄,因此將調整以適應導航菜單項名稱的字符長度不同不進行重置導航元素的寬度。下面是我到目前爲止的代碼:jQuery的基於總寬度李

$(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; 
      }; 
      });  
     }); 

的問題是,即使我得到的所有李時珍的總寬度,由於某種原因,它不會重置wNav到寬,我不知道爲什麼。預先感謝您的幫助。

+1

不應該有一個'$( 「#導航」)寬度(wNav);'後的各?我認爲outerWidth()只是一個「getter」函數。 – Jens 2012-07-31 22:19:51

+0

有趣的是,儘管文檔*要求*'那.outerWidth()'和'.outerHeight()'只是* *干將,你其實可以通過指定一個號碼,而不是一個布爾值的設置這些。我還沒有嘗試過很多,但'outerHeight'肯定適用於內部有很多元素的大型頁面容器。 – ClarkeyBoy 2012-07-31 22:41:53

+0

我的錯誤 - 它的jQuery UI也允許你將它們用作setter。 JS小提琴:http://jsfiddle.net/6tX9u/2/。 – ClarkeyBoy 2012-07-31 22:58:55

回答

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 
}); 
+0

那樣做!我想這將全部放在最後一行的位置。 – max7 2012-07-31 22:36:46

1

那是因爲你只計算outerwidth,而不是設置它。使用

$(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.etc.js http://bitovi.com/blog/2010/06/set-inner-outer-width-height-with-jquery-dimensions-etc-plugin.html

+0

嗯,即使它讓你說什麼也行不通。 。 – max7 2012-07-31 22:31:42

+0

嘗試'$(「#導航」),寬度(wNav);'也我不明白爲什麼ü要調整寬度,而不是下拉菜單 – 2012-07-31 22:36:17

+0

Shivam的高度:我需要調整寬度以適應導航項目名稱不同的語言即增加字符。 – max7 2012-07-31 22:48:45