根据李的风格（背景图像）设置李的ul的班级名称吗？

Question

i have the menu structure like below,

<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>

the first li which has style="background-image:ur('open.gif');" is displayed with dropdown now.

if i click in other li's the style will apply that li's also style="background-image:ur('open.gif');"

Now two li's display it's dropdown li's.

i Need to do is if one li is set with style="background-image:ur('open.gif');" this one. if i click another li, i need to set previous li's UL style display:none which is with style style="background-image:ur('open.gif');".

How can i do this?

Answer 1

You better add a class "open" to the LI and handle the URL with CSS.

Example with 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');
}

Example without JS

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

Answer 2

If I've understood your problem correctly, this should work:

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

Adding and removing a class would be more appropriate here as it would mean you can control the image shown in the background from your stylesheet without needing to change your code (this is called separation of concerns).

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

CSS:

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