Menu Accordion com jQuery

Maycon P. Stanguine · April 16, 2012

Olá a todos, bom dia!

Por favor, estou com problemas ao utilizar menu com jQuery, e agradeceria quem pudesse me ajudar.

Enfim, estou usando o "efeito" accordion para o menu de site (trabalho da faculdade).

Ele funciona perfeitamente.

Mas tem um porém, quando clico em um dos links do menu, ao carregar a página o menu recolhe e fica sempre no primeiro bloco de links.

Segue o código do menu:

HTML:

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> 
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" type="text/css" href="css/layout.css">
  &lt;script type="text/javascript" src="js/jQuery.min.js"></script>
  &lt;script type="text/javascript" src="js/jMenu.js"></script> 
 </head> 
 <body>
  <div id="geral">
  <div id="cabecalho">
   <h1 align="center">Sistema</h1>
  </div> <!-- Fecha Cabeçalho -->
  <div id="barra-tarefas">
   Usuário Logado: <strong>[nome de usuário]</strong> -  <a href="login.html">Sair</a>
  </div> <!-- Fecha barra-tarefas -->
  <div id="lateral">
   <div class="accordian">
    <ul>
     <li>Inicio</li>
     <li>
      <a href="index.html"><div class="menu" style="background-color: #87CEEB;font-weight: bold;">Página Inicial</div></a>
     </li>
    <li>Livro</li>
    <li>
     <a href="pages/livro/cadastrar-livro.html"><div class="menu">Cadastrar Novo Livro</div></a>
     <a href="pages/livro/editar-livro.html"><div class="menu">Editar</div></a>
     <a href="pages/livro/listar-livro.html"><div class="menu">Listar</div></a>
    </li>
    <li>Usuário</li>
    <li>
     <a href="pages/usuario/cadastrar-usuario.html"><div class="menu">Cadastrar</div></a>
     <a href="pages/usuario/editar-usuario.html"><div class="menu">Editar</div></a>
     <a href="pages/usuario/listar-usuario.html"><div class="menu">Listar</div></a>
    </li>
    <li>Fornecedor</li>
    <li>
     <a href="pages/fornecedor/cadastrar-fornecedor.html"><div class="menu">Cadastrar</div></a>
     <a href="pages/fornecedor/editar-fornecedor.html"><div class="menu">Editar</div></a>
     <a href="pages/fornecedor/listar-fornecedor.html"><div class="menu">Listar</div></a>
    </li>
    <li>Funcionario</li>
    <li>
     <a href="pages/funcionario/cadastrar-funcionario.html"><div class="menu">Cadastrar</div></a>
     <a href="pages/funcionario/editar-funcionario.html"><div class="menu">Editar</div></a>
     <a href="pages/funcionario/listar-funcionario.html"><div class="menu">Listar</div></a>
    </li>
   </ul>
   </div> <!-- Fecha div accordian -->
   </div> <!-- Fecha div lateral -->
   <div id="conteudo">
    <h1 align="center">Bem-Vindo</h1><br />
    <p align="center">Utilize o MENU ao lado para navegar pelo sistema.</p>
   </div><!-- Fecha div conteudo -->
   <div style="clear: both;"></div> <!-- Usado para alinhar as div's corretamente -->
   <div id="rodape">
    <h4 align="center">© 2012 - Grupo</h4>
   </div><!-- Fecha div rodape -->
  </div><!-- Fecha div geral -->
 </body> 
</html>

jQuery:

$(document).ready(function() {
//Hide all the content except the first
$('.accordian li:odd:gt(0)').hide();

// Add the dimension class to all the content
$('.accordian li:odd').addClass('dimension');

// Set the even links with an 'even' class
$('.accordian li:even:even').addClass('even');

// Set the odd links with a 'odd' class
$('.accordian li:even:odd').addClass('odd');

// Show the correct cursor for the links
$('.accordian li:even').css('cursor', 'pointer');

// Handle the click event
$('.accordian li:even').click( function() {

// Get the content that needs to be shown
var cur = $(this).next();

// Get the content that needs to be hidden
var old = $('.accordian li:odd:visible');

// Make sure the content that needs to be shown 
// isn't already visible
if ( cur.is(':visible') )
return false;

// Hide the old content
old.slideToggle(300);

// Show the new content
cur.stop().slideToggle(300);
});

Sei que nessa linha $('.accordian li:odd:gt(0)').hide(); é onde ocorre esse "problema" de sempre mostrar o primeiro bloco de links.

O que tentei fazer, alterei $('.accordian li:odd:gt(0)').hide(); para $('.accordian li:odd:gt(1)').hide();

Até funciona, quando a página carrega, abre o segundo bloco primeiro, mas o primeiro também fica aberto.

Se fizer com o terceiro, a mesma coisa, a página carrega com o terceiro bloco aberto, e os demais antes dele também. =(

Tentei fazer com que todos os blocos iniciassem fechados, mas ai num funcionou o script. =S

Não tenho muita experiencia com jQuery, mas só falta isso para terminar meu trabalho e eu já não sei mais o que fazer.

Agradeço a quem puder ajudar. =)

Edited April 16, 2012 by Maycon P. Stanguine

Sign In

Menu Accordion com jQuery

Question

Maycon P. Stanguine

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Forum Statistics

Browse

Activity