手风琴菜单addclass不起作用

Question

I have an accordion menu with background image and color of the heading (menu tab) changing on hover and while clicked. I would like this also to be the case when that menu tab is open (ie, the image/color indicate which menu is open). Right now, as soon as the cursor is not over the menu heading, the background image is removed and the color reverts to the inactive state. All of my research on this site and elsewhere points to using the removeClass and addClass methods, but I can't get this to work.

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

Relevant CSS (minus the UL specs):

/*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);*/
}

I've spent hours trying to find the solution. Are the removeClass and addClass methods correct? And in the correct location within the code? I've also tried replacing those two lines with one line using the toggleClass method, but that doesn't work either. Thanks for your help.

Answer 1

I've removed some of your code and I've changed it a little bit I believe this is what you've meant:

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

        }

    });

});

Example:
http://jsfiddle.net/xvmq8g9k/

Edited on Line 9: instead of using $(this), I've changed it to $('#accordian h3') so all the h3 will be revert instead of the one that you click like you wanted

Let me know if you have more questions