Примените различные изображения в соответствии с размером для меню навигации - PullRequest
Новая
       36

Примените различные изображения в соответствии с размером для меню навигации

2 голосов
/ 02 сентября 2011

Я хочу использовать различные фоновые изображения в соответствии с размером элемента

для меню навигации.

Я пытаюсь стилизовать меню Wordpress с выпадающими списками, но у меня есть много названий ссылок, которые идут в одну строку, но несколько строк длиннее, и они разделяются на две.

Для тех

элементов, которые идут в одну строку, я применил фоновое изображение, используя простой CSS, но я хочу проверить, есть ли элементы , высота которых больше высоты для одной строки. В моем случае высота одной строки составляет 34 пикселя; если есть две линии, высота уже составляет 54 пикселя, и фоновое изображение по умолчанию там не подходит (оно повторяется само). Но я хочу применить увеличенное изображение для этой 54px коробки с jquery.

Я придумал этот код, который, конечно, не работает: 

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 Ответ

2 голосов
/ 02 сентября 2011

Если проблема в том, что изображение повторяется, вы хотите изменить CSS следующим образом: 

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

В ответ на ваш вопрос вам нужно пройтись по всем ли, а не просто проверить: 

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