html - jQuery toggle problem: animates twice -
i have me mystic problem jquery "toggle" method. click once, animates twice. go see yourself!
page source pasted below, (link disappear when have solved this).
html:
<ul class="topnav"> <li><a>about us</a></li> <li><a href="javascript:void(0)" class="sublink">store</a></li> <li class="subnav"><a href="javascript:void(0)">hours</a></li> <li class="subnav"><a href="javascript:void(0)">products</a></li> <li><a href="javascript:void(0)">@the moment!</a></li> <li><a href="javascript:void(0)">contact</a></li> </ul>
css
a{ text-decoration: none; color: black; } a:hover{ color: #cede43; } ul.topnav{ list-style: none; margin: 0; padding: 20px; float: left; font-family: 'arial', sans-serif; font-weight: bold; font-size: 20px; } ul.topnav li{ float: left; margin-right: 20px; position: relative; } li.subnav{ display: none; font-family: 'courier new', serif; }
code
$(document).ready(function(){ $("a.sublink").click(function(){ $(this).parents().find("li.subnav").toggle('slow'); }); });
target 1 specific parent instead of several .parents()
.
$("a.sublink").unbind().click(function(){ $(this).parents("ul").find('.subnav').toggle(200); });
i'm guessing it's issue version duplicate elements added set when .find()
multiple ancestors.
Comments
Post a Comment