手风琴菜单添加类不起作用

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 行编辑：我没有使用 $(this)，而是将其更改为 $('#accordian h3')，因此所有 h3 都将被还原，而不是您想要点击的那个

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