javascript - jquery nav bar slidetoggle issue -
i'm new jquery , far have got code toggle , slide html menu. heres code
<script type="text/javascript"> $(document).ready(function () { $('li').each(function(){ $('li.menuheader').hover(function(){ $('ul.submenu').slidetoggle('slow', function(){}) }); }); }); </script> </head> <body> <div id="navbar"> <ul> <li class="menuheader">test1 <ul class="submenu"> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ul> </li> <li class="menuheader">test2 <ul class="submenu"> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ul> </li> <li class="menuheader">test3 <ul class="submenu"> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ul> </li> </ul> </div> </body> </html>
my jquery dropdowns every menu everytime mouse hovers on menuheader. need seperate these out without using div id's , making seperate jquery functions. can me how this?
maybe looking (n need use slidetoggle think):
$('ul.submenu').hide(); $('li').each(function() { $('li.menuheader').hover(function() { $(this).find('ul.submenu').show('slow') }, function() { $(this).find('ul.submenu').hide('slow') }); });
fiddle here: http://jsfiddle.net/drjpf/
Comments
Post a Comment