Forum

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>

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>

Forum

Problema meniu dublu cu jquery toggle

Problema meniu dublu cu jquery toggle

Problema meniu dublu cu jquery toggle