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

Question

我想根据

的大小使用不同的背景图像导航菜单的元素。

我正在尝试使用下拉框设计 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 值，它是 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)');
});