Установить имя класса для ul в зависимости от стиля li (background-image)?

Question

у меня есть структура меню, как показано ниже,

<ul>

<li style="background-image:ur('open.gif');">
      <ul class="sub-menu">
         ...........
      </ul>
</li>

<li>
      <ul class="sub-menu">
         ...........
      </ul>
</li>

<li>
      <ul class="sub-menu">
         ...........
      </ul>
</li>
</ul>

первый li, у которого есть style = "background-image: ur ('open.gif');"теперь отображается с выпадающим списком.

если я нажму на другой li, стиль будет применен, что li's также style = "background-image: ur ('open.gif');"

Теперь дваДисплей li это выпадающий список li's.

i Нужно сделать, если один li установлен с style = "background-image: ur ('open.gif');"этот.если я нажимаю другой li, мне нужно установить отображение стиля UL предыдущего li: ни один, который имеет стиль style = "background-image: ur ('open.gif');".

Как я могу это сделать

Answer 1

Вам лучше добавить класс "open" в LI и обработать URL с помощью CSS.

Пример с JS:

$(function(){
    $("#menu").children().hover(function(){
        $(this).addClass("open");
    },
    function(){
        $(this).removeClass("open");
    });
});

CSS

#menu li
{
    background-image:url('closed.gif');
}

#menu li.open
{
    background-image:url('open.gif');
}

Пример без JS

#menu li ul
{
    display: none;
    background-image:url('closed.gif');
}
#menu li:hover ul
{
    display: block;
    background-image:url('open.gif');
}

Answer 2

Если я правильно понял вашу проблему, это должно сработать:

$("LI").click(function() {
    $("LI").css("background-image", "none");
    $(this).css("background-image", "url('open.gif')");
});

Добавление и удаление класса было бы более уместным, поскольку это означало бы, что вы можете управлять изображением, отображаемым на заднем плане, из вашеготаблица стилей без необходимости изменения кода (это называется разделением задач).

$("LI").click(function() {
    $("LI").removeClass("open");
    $(this).addClass("open");
});

CSS:

.open { background-image: url('open.gif'); }