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的样式=“background-image：ur（'open.gif'）;”

现在两个li显示它是下拉列表。

我需要做的是如果一个li设置为style =“background-image：ur（'open.gif'）;”这个。如果我点击另一个li，我需要设置以前li的UL样式显示：none，样式样式=“background-image：ur（'open.gif'）;”。

我该怎么做？

Answer 1

您最好向LI添加一个“open”类，并使用CSS处理URL。

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

根据li的样式（背景图像）设置li的ul的类名？

2 个答案: