Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

GabrielFerrari

[Resolvido] Fechar menu accordion

Por , em Javascript

Recommended Posts

GabrielFerrari    41

GabrielFerrari
Postado

Boa tarde pessoal \o

 

Fiz um menu accordion para o site que estou desenvolvendo seguindo esse tutorial: http://elmicox.blogspot.com/2007/04/accordion-menu.html

 

Consegui fazer ele perfeitamente e estou adequando ele para minhas necessidades.

Porém vi um detalhe que gostaria de mudar

 

Quando a pessoa abre um item e clica nele de novo

Ele fecha e abra logo em seguida

 

Eu gostaria ao clicar novamente no mesmo item ele fechasse.

O menu pode ser visto nesse link: http://testes.bizarriceslol.com/

 

Se tiver necessidade do meu código está a baixo.

 

HTML:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Usion</title>
<link href="scripts/principal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/jquery.js"></script>
 <script>
 $(document).ready(function(){
  $("dd").hide();
  $("dt a").click(function(){
   $("dd:visible").slideUp("slow");
   $(this).parent().next().slideDown("slow");
   return false;
  });
 });
 </script>
 <style>
<!-- MENU -->
dl{
	width: 300px;
}
dl,dd {
	margin: 0;
}
dt {
	padding: 5px;
	margin: 0px;
}
dt a {
	color: #FFF;
}
dd a {
	color: #000;
}
ul {
	list-style: none;
	padding: 5px;
}
<!-- FIM DO MENU -->
 </style>
</head>

<body>
<div class="tudo">

	<div class="fundo">
		<img src="imagens/fundo.jpg" alt="fundo" />
	</div>
   <div class="conteudo">
		<img src="imagens/conteudo.jpg" alt="conteudo" width="670" height="291" />
  </div>
   <!-- MENU -->
<div class="menu">
<dl>
 <dt><a href="/"><img src="imagens/btn_empresa.png" alt="empresa" width="150" height="28" border="0" /></a></dt>
 <dd>
 <ul>
  <li><a href="/src/">Download</a></li>
  <li><a href="/docs/">Documentation</a></li>
  <li><a href="/blog/">Blog</a></li>

 </ul>
 </dd>
 <dt><a href="/discuss/"><img src="imagens/btn_estrutura.png" width="150" height="28" alt="estrutura" border="0"/></a></dt>
 <dd>
 <ul>
  <li><a href="/discuss/">Mailing List</a></li>
  <li><a href="/tutorials/">Tutorials</a></li>

  <li><a href="/demos/">Demos</a></li>
  <li><a href="/plugins/">Plugins</a></li>
 </ul>
 </dd>
 <dt><a href="/dev/"><img src="imagens/btn_servicos.png" alt="serviços" width="150" height="28" border="0" /></a></dt>
 <dd>
 <ul>

  <li><a href="/src/">Source Code</a></li>
  <li><a href="/dev/bugs/">Bug Tracking</a></li>
  <li><a href="/dev/recent/">Recent Changes</a></li>
 </ul>
 </dd>
 
  <dt><a href="/"><img src="imagens/btn_clientes.png" alt="clientes" width="150" height="28" border="0" /></a></dt>
 <dd>
 <ul>
  <li><a href="/src/">Download</a></li>
  <li><a href="/docs/">Documentation</a></li>
  <li><a href="/blog/">Blog</a></li>

 </ul>
 </dd>
 <dt><a href="/"><img src="imagens/btn_contato.png" alt="empresa" width="150" height="28" border="0" /></a></dt>
 <dd>
 <ul>
  <li><a href="/src/">Download</a></li>
  <li><a href="/docs/">Documentation</a></li>
  <li><a href="/blog/">Blog</a></li>

 </ul>
 </dd>
 <dt><a href="/discuss/"><img src="imagens/btn_ftp.png" width="150" height="28" alt="estrutura" border="0"/></a></dt>
 <dd>
 <ul>
  <li><a href="/discuss/">Mailing List</a></li>
  <li><a href="/tutorials/">Tutorials</a></li>

  <li><a href="/demos/">Demos</a></li>
  <li><a href="/plugins/">Plugins</a></li>
 </ul>
 </dd>
</dl>

<!-- FIM DO MENU -->
</div>
</div>
</body>
</html>

 

CSS:

 

* {
	margin:0;
	padding:0;
	list-style:none;
}
body {
	 font-family: Arial;
	 font-size: 16px;
}
.tudo{
	
}
.fundo{
	position:absolute;
	z-index: 0;
}
.menu{
	position:absolute;
	width:158px;
	padding-top:335px;
	padding-left:30px;
	z-index:2;
}
.conteudo{
	position:absolute;
	width:670px;
	padding-top: 365px;
	padding-left: 300px;
	z-index:1;
}

Obrigado http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

GabrielFerrari    41

GabrielFerrari
Postado

Webmind esse site tem conteudo muito bom.

Já está "favoritado" aqui obrigado :)

 

 

 

Consegui resolver:

 

basta mudar:
$(this).parent().next().slideDown("slow");

para:

$(this).parent().next().not(':visible').slideDown("slow");

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito