Problema meniu dublu cu jquery toggle

Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
hi_ella
Mesaje:40

Problema meniu dublu cu jquery toggle

Salut
Am incercat un script cu jquery si css pentru un meniu dublu. Ceva gandit de mine, dar nu merge, poate gasiti greseala sau greselile.

Cod: Selectaţi tot

<html>
<head>
<style type="text/css">
<!--
#menu{
list-style:none;
}
a{text-decoration:none;}
a.link:hover{
background-color:black;
color:white;
cursor:pointer;
}
.hid{display:none;
position:absolute;
}
-->
</style>
<script type="text/javascript" src="jquery_library.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
$('a.link').click(function(){$('this>ul.hid').toggle('1200');});});
-->
</script>
</head>
<body>
<a href="#" class="link">Trupe
<ul class="hid">
<li>Evanescence</lI>
<li>BFMV</li>
<li>Papa Roach</li>
</ul>
</a>
<a href="#" class="link">Concerte
<ul class="hid">
<li>Europe</li>
<li>America</li>
<li>Asia</li>
</ul>
</a>
</body>
</html>
MarPlo Mesaje:4343
Ca sa fie codul valid HTML, nu se adauga elemente de tip bloc (div, ul) in elemente tip liniare (span, a). In astfel de constructie nu functioneaza bine "position:absolute".
Cuvantul special "this" se adauga separat, in afara sirului (fara a fi intre ghilimele).
Asi face asa:

Cod: Selectaţi tot

<html>
<head>
<style type="text/css">
<!--
div.link {
 float: left;
 margin: 1px 5px;
}
div.link span:hover {
 background-color:black;
 color:white;
 cursor:pointer;
}
.hid{
 display:none;
position:absolute;
}
-->
</style>
<script type="text/javascript" src="jquery_1.6.1.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
  $('div.link').click(function(){
    $(this).find('>ul.hid').toggle('1200');
  });
});
-->
</script>
</head>
<body>
<div class="link"><span>Trupe</span>
<ul class="hid">
<li>Evanescence</lI>
<li>BFMV</li>
<li>Papa Roach</li>
</ul>
</div>
<div class="link"><span>Concerte</span>
<ul class="hid">
<li>Europe</li>
<li>America</li>
<li>Asia</li>
</ul>
</div>
</body>
</html>

Subiecte similare