根据导航菜单的大小应用不同的图像

Question

我想根据＆lt; li＆gt;的大小使用不同的背景图像。导航菜单的元素。

我正在尝试使用下拉框来设置Wordpress菜单的样式，但是我有很多链接名称，这些名称在一行中，但很少行更长，并且它们分成两部分。

对于那些＆lt; li＆gt;元素，在一行中，我使用简单的CSS应用背景图像，但我想检查，如果有一些＆lt; li＆gt;元素，其高度大于一行的高度。就我而言，一行高度为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值，它是34px。我敢打赌它只读取第一个元素，而真实的是它的一行，它的高度是34px。

我希望，有人可以提供帮助。

谢谢！

Answer 1

如果问题是图像重复出现，则需要将CSS修改为：

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

在回答你的问题时，你需要遍历所有的li，而不只是测试一个：

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