根據導航菜單的大小應用不同的圖像

Question

我想根據導航菜單的<li>元素的大小使用不同的背景圖像。

我試圖使用下拉框來設計Wordpress菜單，但我有很多鏈接名稱，這些名稱只在一行中顯示，但少數行數較長，而且分爲兩部分。

對於那些<李>元素，它出現在一個行，我用簡單的CSS應用背景圖像，但我要檢查，如果有一些<李>元素，其高度比高度一行多。在我的情況下，一行高度是34px;如果有兩行，高度已經是54px，並且默認背景圖像不適合那裏（它重複它自己）。但我想用jQuery爲這個54px的盒子應用更大的圖像。

我想出了這個代碼，這當然是不工作：

var line_height = $("nav li").height(); 

if(line_height > 34){ 

    $(this).css("background-image", url("images/nav-two-lines.png")) 
} 

我試圖檢查LINE_HEIGHT價值，這是34像素。我敢打賭，它只讀取第一個元素，並且它是一行，其高度爲34px。

我希望有人能幫助。

謝謝！

Answer 1

如果問題是圖像重演，你要修改的CSS閱讀：

background: url(...) no-repeat; 

在回答你的問題，你需要遍歷所有李時珍，而不僅僅是測試一個：

$('nav li').each(function() { 
    if($(this).height() > 34) 
     $(this).css('background-image', 'url(images/nav-two-lines.png)'); 
});