меню аккордеона 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: вместо того, чтобы использовать $ (this), я изменил его на $ ('# accordian h3'), поэтому все h3 будут возвращены вместо того, который вы нажмете, как хотите.

Сообщите мне, если вы есть еще вопросы