Jquery 更改所选列表的背景色

一旦我们点击手风琴中的任何一个，它就会被选中，并应用一些背景色，直到我们点击另一个为止。我尝试了以下代码，有人能帮我吗

 $("#accordian h3").click(function() {
      var txt = $(this).text();
      //alert(txt);
      //slide up all the link lists
      $("#accordian ul ul").slideUp();
      //$(this).css('border-left','18px solid #ff1800');
      //slide down the link list below the h3 clicked - only if its closed
      if(!$(this).next().is(":visible")) {
           $(this).next().slideDown();
      }
     })
 });

 /*  $("li").click(function(){
      $(this).css('background','orange');
 }); */

这是

谢谢

试试这个

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

你可以做：

$("#accordian h3").click(function () {
    var txt = $(this).text();
    //slide up all the link lists
    $("#accordian ul ul").slideUp();
    if (!$(this).next().is(":visible")) {
        $(this).next().slideDown();
    }
    $('#accordian li.active').removeClass('active');
    $(this).closest('li').addClass('active');
});

jQuery：

CSS:

和CSS修改：

---

谢谢…但它也应该适用于兄弟姐妹。是否要更改headingdashbard、task等的颜色？我已经更新了我的答案非常感谢…第一个解决方案是正确的，我想要标题的分离颜色。。。。

$("#accordian h3").click(function () {
    var txt = $(this).text();
    //slide up all the link lists
    $("#accordian ul ul").slideUp();
    if (!$(this).next().is(":visible")) {
        $(this).next().slideDown();
    }
    $('#accordian li.active').removeClass('active');
    $(this).closest('li').addClass('active');
});

$("#accordian ul li ul li").click(function(){
        $('#accordian ul li ul li').removeClass('red');
        $(this).addClass('red');
     });

.red, .red:hover, .red:active {
    background: #f00 !important;
}

/*hover effect on links*/
#accordian ul ul li:hover {
    background: #003545;
    border-left: 5px solid lightgreen;
}