Переключить класс CSS на jQuery accordion Nav

Question

Итак, я знаю, что эти вопросы заданы больше, чем должно быть, и я пробовал ответы, которые я нашел, не повезло.

В настоящее время у меня есть стиль стиля аккордеона, с + рядом с каждым расширяемым разделом, указывающим, что он расширяемый.

Когда я нажимаю на категорию в своей навигации, я бы хотел, чтобы + исчез и только снова появится в этой категории после нажатия на другую категорию.

Я пытался что-то вроде этого:

$(this).toggleClass("accordion > li:before"); 

и так:

$('.accordion li').toggleClass("accordion > li:before"); 

Но до сих пор, чтобы получить что-нибудь работать. Вы можете увидеть рабочий пример ниже моей JSFiddle

JSFiddle

JQuery, что я в настоящее время есть, минус то, что я пытался выполнить:

$(document).ready(function() { 
$('.accordion li').children('ul').slideUp('fast'); 
$('.accordion > li').click(function() { 
    $(this).siblings('li').find('ul').slideUp('fast'); 
    $('> ul', this).slideDown('fast'); 
}); 
$('a').click(function() { 
    $('a').removeClass("a-active"); 
    $('li').removeClass("li-active"); 
    $(this).addClass("a-active"); 
    $(this).parent('li').addClass("li-active"); 
}); 
}); 

Answer 1

См скрипку: http://jsfiddle.net/mGcv8/2

HTML: Добавлен класс для всего вашего верхнего уровня <li>

<li class="closed"> 

CSS: Модифицированная ваш селектор контента +

.accordion > li.closed:before { 
    color:#959699; 
    content:"+"; 
    float:right; 
    padding:14px 70px 0 0; 
} 

JavaScript: Модифицированная ваш li нажмите событие

$('.accordion > li').click(function() { 
    $(this).removeClass('closed'); 
    $(this).siblings('li').addClass('closed').find('ul').slideUp('fast'); 
    $('> ul', this).slideDown('fast'); 
});