手風琴菜單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都將還原，而不是您想要的那樣單擊的那個

如果您還有其他問題，請告訴我