JQuery伸展按鈕與窗口寬度水平相關

Question

我嘗試創建一個將其項目拉伸到窗口寬度的菜單。有人能告訴我我做錯了什麼嗎？我知道這個問題已經被問過，但我不知道我的代碼有什麼問題。

這就是我「米試圖實現的。紅色是窗口

http://jsfiddle.net/JdGeQ/5/

的Javascript

$(function(){ 
    $(window).resize(function (e) { 
     setTimeout(function() { 
      resizeButtons(); 
     }, 200); 
    }); 
    resizeButtons(); 
}); 

function resizeButtons() { 
    var count = $("#menu").length; 
    var itemwidth = $(window).width/count; 

    $(".item").css("background", "blue"); 
    $(".item").css("width", itemwidth); 
} 

CSS

.elementtop { 
    position: fixed; 
    top: 0; 
} 
.elementfooter { 
    position: fixed; 
    bottom: 0; 
} 
.elementright { 
    right: 0; 
} 
ul { 
    min-width:100%; 
    padding:0; 
    margin:0; 
    float:left; 
    list-style-type:none; 
    background: #000000; 
} 
li { 
    display:inline; 
} 
a { 
    overflow: hidden; 
    text-decoration:none; 
    color:white; 
    background-color:purple; 
    padding:0.2em 0.6em; 
    border-right:1px solid white; 
} 

HTML

<div> 
    <ul id="menu"> 
     <li> <a href="#" class="item"> 
       <span>Text text</span> 
      </a> 

     </li> 
     <li> <a href="#" class="item"> 
       <span>Text2</span> 
      </a> 

     </li> 
     <li> <a href="#" class="item"> 
       <span>Text3</span> 
      </a> 

     </li> 
    </ul> 
</div> 

在此先感謝。

Answer 1

你的jQuery代碼中有幾個錯誤。您需要使用width()而不是width，因爲它是一個函數調用。另外，當您分配count時，您並未選擇菜單項，而只是選擇了#menu。

function resizeButtons() { 
    var count = $("#menu .item").length; 
    var itemwidth = $(window).width(); 
    itemwidth = itemwidth/count; 
    $(".item").css(
     "width", itemwidth 
    ); 
} 

您還需要設置display:inline-block或display:block你的錨，這樣就可以影響width。

a { display:inline-block; } 

Updated Fiddle

注意：您還需要佔填充，等你的菜單項，以獲得正確的結果。

Answer 2

以$（「＃菜單」），你得到#menu元素出現的號碼長度 - 1.你應該使用下面的方法得到的菜單項的數量

var count = $("#menu li").length; 

Answer 3

這可以用純CSS來實現：

http://cssdeck.com/labs/hgmvgwqc

ul { 
    min-width:100%; 
    padding:0; 
    margin:0; 
    display: table; 
    list-style-type:none; 
    background: #000000; 
} 
li { 
    display: table-cell; 
    width: 33%; 
} 
a { 
    overflow: hidden; 
    text-decoration:none; 
    color:white; 
    background-color:purple; 
    padding:0.2em 0.6em; 
    border-right:1px solid white; 
    display: block; 
} 

這種方法需要知道多少個列表項有。