Duvida sobre interação Jquery Css

[Rodrigo Soares Morais 0]

Primeiramente boa tarde a todos. Tenho o seguinte código de um menu

                                        <ul class="accordion">
						<li id="one" class="files">
							<a href="#one">Estágio</a>
							<ul class="sub-menu">
								<li></li>
							</ul>
						</li>
						<li id="two" class="files">
							<a href="#two">Bacharelado</a>
							<ul class="sub-menu">
								<li><a href="#">Administração de Empresas</a></li>
								<li><a href="#">Ciências Contábeis</a></li>
							</ul>
						</li>
						<li id="three" class="mail">
							<a href="#three">Superior de Tecnologia</a>
							<ul class="sub-menu">
								<li><a href="#">Recursos Humanos</a></li>
								<li><a href="#">Marketing</a></li>
								<li><a href="#">Processos Gerenciais</a></li>
							</ul>
						</li>
						<li id="four" class="cloud">
							<a href="#four">Licenciatura</a>
							<ul class="sub-menu">
								<li><a href="#">Biologia</a></li>
								<li><a href="#">Educação Física</a></li>
								<li><a href="#">Física</a></li>
								<li><a href="#">Geografia</a></li>
								<li><a href="#">História</a></li>
								<li><a href="#">Letras</a></li>
								<li><a href="#">Matemática</a></li>
								<li><a href="#">Português</a></li>
								<li><a href="#">Pedagogia</a></li>
								<li><a href="#">Química</a></li>
							</ul>
						</li>
						<li id="five" class="sign">
							<a href="#five">Colação de Grau</a>
							<ul class="sub-menu">
								<li><a href="#">Agenda</a></li>
								<li><a href="#">Orientações Discurso</a></li>
								<li><a href="#">Cerimônias</a></li>
								<li><a href="#">Estrutura</a></li>
								<li><a href="#">Procedimentos Acadêmicos</a></li>
							</ul>
						</li>
					</ul>

O js:

<script type="text/javascript">
		$(document).ready(function() {
			var accordion_head = $('.accordion > li > a'),
				accordion_body = $('.accordion li > .sub-menu');
			        accordion_head.on('click', function(event) {
				event.preventDefault();
				if ($(this).attr('class') != 'active'){
					accordion_body.slideUp('normal');
					$(this).next().stop(true,true).slideToggle('normal');
					accordion_head.removeClass('active');
					$(this).addClass('active');
				}
			});
		});
	</script>

E o css

.accordion,
.accordion ul,
.accordion li,
.accordion a,
.accordion span {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}
#wrapper-250{
	margin-top:2%;
}
.accordion li {
	list-style: none;
}
.accordion li > a {
	display: block;
	min-width: 10px;
	height: 32px;
	border-bottom:1px solid #fff;
	font-size:0.9em;
	text-decoration: none;
}

.accordion > li:hover > a,
.accordion > li:target > a,
.accordion > li > a.active {
	text-shadow: 1px 1px 1px rgba(255,255,255, .2);
}
.accordion li.files > a:before { 
	background-position: 0px 0px; 
}
.accordion li.files:hover > a:before,
.accordion li.files:target > a:before,
.accordion li.files > a.active:before { 
	background-position: 0px -24px; 
}

.accordion li.mail > a:before { 
	background-position: -24px 0px;
}
.accordion li.mail:hover > a:before,
.accordion li.mail:target > a:before,
.accordion li.mail > a.active:before { 
	background-position: -24px -24px; 
}

.accordion li.cloud > a:before { 
	background-position: -48px 0px; 
}
.accordion li.cloud:hover > a:before,
.accordion li.cloud:target > a:before,
.accordion li.cloud > a.active:before { 
	background-position: -48px -24px; 
}

.accordion li.sign > a:before { 
	background-position: -72px 0px; 
}
.accordion li.sign:hover > a:before,
.accordion li.sign:target > a:before,
.accordion li.sign > a.active:before { 
	background-position: -72px -24px; 
}
.sub-menu li a {
	color: #797979;
	text-shadow: 1px 1px 0px rgba(255,255,255, .2);
	background: #e5e5e5;
	border-bottom: 1px solid #c9c9c9;
}

.sub-menu li:hover a { 
	background: #efefef;
}

.sub-menu li:last-child a {
	border: none;
}

.sub-menu li > a span {
	text-shadow: 1px 1px 0px rgba(255,255,255, .2);
	background: transparent;
	border: 1px solid #c9c9c9;
}
.accordion li > .sub-menu {
	display: none;
}

Dessa forma, após o click do usuário o menu será exibido caso a seu attr não esteja como ativo. Porém não encontrei uma forma de fazer com que após o click no mesmo link este fique desativo realizando o fade-in do menu. E outro problema dessa forma eu não poderei ter o meu link <a href="#three">Superior de Tecnologia</a> ou <a href="#four">Licenciatura</a> como um link valido para alguma url.

Desculpas se não fui muito claro é meu primeiro post. E estou de prontidão para esclarecer o que possa ter ficado disperso.

[Rodrigo Soares Morais 0]

resolvido da seguinte forma:

$(document).ready(function() {
   var accordion_head = $('.accordion > li > a'), accordion_body = $('.accordion li > .sub-menu');
   accordion_head.on('click', function(event) {
      if($(this).next().is(':visible')) {
         $(this).next().slideUp();
      }else{
         accordion_body.slideUp();
         $(this).next().slideDown();
      }
   });	
});

Desta forma eu apenas verifico com o if se o elemento atual tem seu proximo elemento na arvore DOM um display:none (que é o valor padrão!) se sim eh porque ele ja esta selecionado então apenas esconda-o, se não então esconda todos os elementos subsequentes do atual na arvore DOM e depois mostre apenas o proximo elemento.

Elemento atual: <a>

proximo elemento DOM: .sub-menu

Abraços a todos. :)