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

【问题标题】：Apply different images according to size for navigation menus根据导航菜单的大小应用不同的图像
【发布时间】：2011-11-09 09:00:09
【问题描述】：

我想根据

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

我正在尝试使用下拉框设置 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。

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

谢谢！

【问题讨论】：

【解决方案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)');
});

【讨论】：