手风琴菜单addclass不起作用

Question

我有一个手风琴菜单，其背景图像和标题（菜单选项卡）的颜色在悬停时和单击时都在变化。 我也希望菜单选项卡处于打开状态（例如，图像/颜色指示哪个菜单处于打开状态）。 现在，只要光标不在菜单标题上，背景图像就会被删除，颜色恢复为非活动状态。 我在此站点以及其他地方所做的所有研究都指向使用removeClass和addClass方法，但是我无法使其正常工作。

jQuery的：

$(document).ready(function(){
    var panel = $("#accordian h3");
    panel.click(function(){
        //slide up all the link lists
        $("#accordian ul ul").slideUp();
        //slide down the link list below the h3 clicked, if it's closed
        if(!$(this).next().is(":visible"))
            $(this).next().slideDown();
        panel.removeClass('active')
        panel.addClass('active')
    });
})

相关CSS（减去UL规范）：

/*main menu heading style*/
#accordian h3 {
    font-size: 12px;
    line-height: 34px;
    padding: 0px 0px 0px 5px;
    cursor: pointer;
    /*fallback for browsers not supporting gradients*/
    background: #984e06;
    background: linear-gradient(#984e06, #FF9600);
}
/*heading hover effect, active (as clicked) effect*/
#accordian h3:hover,
#accordian h3:active {
    text-shadow: 0 0 2px rgba(0, 0, 0, 1.0);
    background-repeat: no-repeat;
    background-image: url(../Images/Logo.jpg);
    background-size: 25px 25px;
    background-position: 5px 4px; /*left center;*/
    padding: 0px 35px;
    background-color: #ffdf05; /*linear-gradient(#ffdf05, #FF9600);*/
}

我已经花了数小时试图找到解决方案。 removeClass和addClass方法正确吗？ 并在代码内的正确位置？ 我也尝试过使用toggleClass方法将这两行替换为一行，但这都不起作用。 谢谢你的帮助。

Answer 1

我删除了一些代码，并做了一些更改，我相信这就是您的意思：

$(document).ready(function(){ 

    $('#accordian ul').hide();

    $("#accordian h3").click(function(){

        $("#accordian ul").slideUp();
          //type here the css that you want if it's NOT clicked            
          $('#accordian h3').css({
              'background-color' : '#984e06', 
              'background-position': '5px 4px'
          });

        if(!$(this).next().is(":visible"))
        {
            $(this).next().slideDown();
            //type here the css that you want if it's clicked            
            $(this).css({
                'background-color' : '#ffdf05', 
                'background-position': '5px 4px'
            });

        }

    });

});

例：
http://jsfiddle.net/xvmq8g9k/

在第9行上进行了修改：我将其更改为$（'＃accordian h3'），而不是使用$（this），因此所有h3都将还原，而不是您想要的那样单击的那个

如果您还有其他问题，请告诉我