2012-07-03 185 views
2

我有一个jQuery的函数,当li被点击时,li会展开。那部分工作正常。现在,我想要点击li时切换背景颜色。但是,它的工作原理,但是当我必须再次点击李项目以解开背景颜色。有人能帮助我在正确的方向如何实现这一目标。jquery切换背景颜色

$(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"); 
    }); 
});​ 
+0

什么是你点击切换'背景颜色? –

+0

我在列表项目上点击 –

回答

2

每当用户点击设置你的<li> -s到默认的颜色,并强调当前:

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

...

UPDATE

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"); 
     } 
    }); 
}); 
+0

非常感谢。 –

+0

不客气 –

2

假设<li> s都是兄弟姐妹,做这样的事情会稍微高效一些,并且允许同一页面上的多个列表独立于另一个列表工作(同样,假设这是所需的功能)

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