Question

我有一个jquery函数，当点击li时，li会扩展。那部分工作正常。现在，我想，当点击li时，它会切换背景颜色。但它确实有效，但是当我必须再次点击li项目以取消背景颜色时。有人可以帮助我找到正确的方向来实现这一目标。

$(function() {
    $('.a').click(function() {
        var name = $(this).attr("name");
        var content = $('.content[name=' + name + ']');
        $('.content').not(content).hide('fast');
        $('.selected').css('background', 'yellow');
        content.slideToggle('fast');
    });

    $("li").click(function() {
        $(this).toggleClass("highlight");
    });
});

Answer 1

在每次点击时，将<li> - s设置为默认颜色并突出显示当前：

$("li").click(function() {
    $("li").removeClass("highlight");
    $(this).addClass("highlight");
});

...

<强>更新

http://jsfiddle.net/NXVhE/4/

$(function() {
    $('.a').click(function() {  
        $(this).removeClass("highlight");    
        var name = $(this).attr("name");
        var content = $('.content[name=' + name + ']');

        $('.content').not(content).hide();
        content.toggle();
    });

    $("a").click(function () {
        $("a").removeClass("highlight");

        if ( $(".content").is(":visible") ) {
            $(this).addClass("highlight");
        }
    });  
});

Answer 2

假设<li>都是兄弟姐妹，做这样的事情会稍微有点效率，并允许同一页面上的多个列表彼此独立运行（同样，假设是所需的功能）

$('li').click(function() {
  $('this').addClass('highlight').siblings().removeClass('highlight').
});

Jquery切换背景颜色

2 个答案: