← Javascript

Duvida em dropdown jQuery

Lida 4461 vezes

Offline

Tiago Martins 
Membro
Mensagens 932 Gostos 9
Feedback +4

Troféus totais: 29
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

Estou com  um problema, so me funciona o primeiro dropdown, os outros não fazem absolutamente nada...

Código: [Seleccione]
<!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" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script language="javascript">
$(document).ready(function() { // apenas é carregado quando o documento acabar todo o carregamento
    $('#link').click(function() { // quando clica-mos em qualquer elemento com identificação "link"...
      if ($('#conteudo').is(":hidden")) // se a div do nosso conteudo tiver escondida ou seja, para cima...
    {
      $('#conteudo').slideDown("slow"); // o conteúdo irá descer
      $.cookie('nomedocookie', 'aberto'); // e, após descer, irá definir um cookie de nome "nomedocookie" com valor "aberto"
    } else { // mas, se o conteudo não estiver escondido...
      $('#conteudo').slideUp("slow"); // o conteudo não ira descer, mas sim subir
      $.cookie('nomedocookie', 'fechado'); // e então, o valor do cookie irá ser definido para "fechado"
    }
});
var aberto = $.cookie('nomedocookie'); // define que a var fechada, é o valor do cookie
var fechado = $.cookie('nomedocookie'); // não é necessário, mas se for preciso terá outra var, para outro cookie já feita, tenha em atenção que este sistema está preparado para as duas vars!
  if (fechado == 'fechado') { // se a var "fechado" estiver valor de "fechado"...
   $('#conteudo').hide(); // a div do conteúdo irá aparecer escondida
};
    if (aberto == 'aberto') { // mas, se a var "aberto" estiver com valor "aberto"...
     $('#conteudo').show(); // e então, a div aparecerá!
};
});
</script>
<script language="javascript">
$(document).ready(function() { // apenas é carregado quando o documento acabar todo o carregamento
    $('#link2').click(function() { // quando clica-mos em qualquer elemento com identificação "link"...
      if ($('#conteudo2').is(":hidden")) // se a div do nosso conteudo tiver escondida ou seja, para cima...
    {
      $('#conteudo2').slideDown("slow"); // o conteúdo irá descer
      $.cookie('nomedocookie2', 'aberto'); // e, após descer, irá definir um cookie de nome "nomedocookie" com valor "aberto"
    } else { // mas, se o conteudo não estiver escondido...
      $('#conteudo2').slideUp("slow"); // o conteudo não ira descer, mas sim subir
      $.cookie('nomedocookie2', 'fechado'); // e então, o valor do cookie irá ser definido para "fechado"
    }
});
var aberto = $.cookie('nomedocookie2'); // define que a var fechada, é o valor do cookie
var fechado = $.cookie('nomedocookie2'); // não é necessário, mas se for preciso terá outra var, para outro cookie já feita, tenha em atenção que este sistema está preparado para as duas vars!
  if (fechado == 'fechado') { // se a var "fechado" estiver valor de "fechado"...
   $('#conteudo2').hide(); // a div do conteúdo irá aparecer escondida
};
    if (aberto == 'aberto') { // mas, se a var "aberto" estiver com valor "aberto"...
     $('#conteudo2').show(); // e então, a div aparecerá!
};
});
</script>
<script language="javascript">
$(document).ready(function() { // apenas é carregado quando o documento acabar todo o carregamento
    $('#link3').click(function() { // quando clica-mos em qualquer elemento com identificação "link"...
      if ($('#conteudo3').is(":hidden")) // se a div do nosso conteudo tiver escondida ou seja, para cima...
    {
      $('#conteudo3').slideDown("slow"); // o conteúdo irá descer
      $.cookie('nomedocookie3', 'aberto'); // e, após descer, irá definir um cookie de nome "nomedocookie" com valor "aberto"
    } else { // mas, se o conteudo não estiver escondido...
      $('#conteudo3').slideUp("slow"); // o conteudo não ira descer, mas sim subir
      $.cookie('nomedocookie3', 'fechado'); // e então, o valor do cookie irá ser definido para "fechado"
    }
});
var aberto = $.cookie('nomedocookie3'); // define que a var fechada, é o valor do cookie
var fechado = $.cookie('nomedocookie3'); // não é necessário, mas se for preciso terá outra var, para outro cookie já feita, tenha em atenção que este sistema está preparado para as duas vars!
  if (fechado == 'fechado') { // se a var "fechado" estiver valor de "fechado"...
   $('#conteudo3').hide(); // a div do conteúdo irá aparecer escondida
};
    if (aberto == 'aberto') { // mas, se a var "aberto" estiver com valor "aberto"...
     $('#conteudo3').show(); // e então, a div aparecerá!
};
});
</script>
</head>

<body>
<div id="estrutura">
<div id="left"><a href="javascript:void(0);" id="link"><h1>Administrador</h1></a><div id="conteudo"></div></div>
<div id="center"><a href="javascript:void(0);" id="link2"><h1>Operador</h1></a><div id="conteudo2"></div></div>
<div id="right"><a href="javascript:void(0);" id="link3"><h1>Utilizador</h1></a><div id="conteudo3"></div></div>
</div>
</body>
</html>

Alguem faz ideia do problema? :s
Offline

Tiago Martins 
Membro
Mensagens 932 Gostos 9
Feedback +4

Troféus totais: 29
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

Pff alguem, é urgente...eu nao encontro o erro :s
Offline

RonaldoFS 
Membro
Mensagens 18 Gostos 1
Troféus totais: 20
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 10 Posts First Post

Primeiro que tudo, não utilizes o JS no HTML. Separa em ficheiros .js e carrega-os com <script>.

Segundo, não percebi a utilidade final do cookie.

Terceiro, em vez de usares ID usa class e escusas de repetir esse código todo. Afinal de contas jQuery é "write less, do more".
Algo do género:


script.js
Código: [Seleccione]

$(document).ready(function() {
  $('.conteudo').hide();
  $('.link').click(function() {
    $(this).next('.conteudo').slideToggle('slow');
  });
})


e no html:
Código: [Seleccione]
<div id="estrutura">
  <div id="left">
    <a href="javascript:void(0);" class="link"><h1>Administrador</h1></a>
    <div class="conteudo">
      <p>conteudo</p>
    </div>
  </div>
  <div id="center">
    <a href="javascript:void(0);" class="link"><h1>Operador</h1></a>
    <div class="conteudo">
      <p>conteudo</p>
    </div>
  </div>
 <div id="right">
    <a href="javascript:void(0);" class="link"><h1>Utilizador</h1></a>
    <div class="conteudo">
      <p>conteudo</p>
    </div>
  </div>
</div>


Testa e analisa bem o código.
Acho que está fácil de compreender, mas se tiveres dúvidas avisa.