jQuery toggle problem: animates twice
I have a t开发者_如何学JAVAo me mystic problem with jQuery "toggle" method. I click it once, but it animates twice. Go see for yourself!
Demo
Page source is pasted below, (link will disappear when I 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 one specific parent instead of several with .parents().
$("a.sublink").unbind().click(function(){
$(this).parents("ul").find('.subnav').toggle(200);
});
I'm guessing it's an issue with that version where duplicate elements are added to the set when you do the .find() from multiple ancestors.
I can't replicate this:
http://jsfiddle.net/treeface/tm5vQ/
Try updating your version of jQuery to 1.5 by including this link in your jQuery script tag:
http://code.jquery.com/jquery-1.5.min.js
When you do that, you should look into using the closest() method instead of calling parents() which returns all ancestors of an element.
Don't know what your finding is wrong, I put your code into jsfiddle, and it works fine. is there something else on your page that may be interfering with this code?
http://jsfiddle.net/ZCVac/1/
Looking at your linked page I see what you're talking about. Not sure what's causing it... investigating...
It looks like you're using a super old version of jQuery 1.2.3. Try upgrading that.
Looks like using jQuery previous to 1.3 causes the problem.
$(document).ready(function(){
$("a.sublink").click(function(){
$(this).parent("li").siblings(".subnav").toggle(200);
});
});
EDIT: Additionally you may want to do something like this otherwise you are going to run into problems if you want subnavs on more than one parent item:
<script src="./Menu problem_files/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a.sublink").click(function(){
$(this).siblings().find(".subnav").toggle(200);
});
});
</script>
</head>
<body>
<ul class="topnav">
<li><a>About us</a></li>
<li><a href="javascript:Void(0)" class="sublink">Store</a>
<ul>
<li class="subnav" style="display: block; "><a href="javascript:void(0)">Hours</a></li>
<li class="subnav" style="display: block; "><a href="javascript:void(0)">Products</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">@the Moment!</a></li>
<li><a href="javascript:void(0)">Contact</a></li>
</ul>
</body>
Its working fine now. See!
The first thing I did was update my jquery file. Stupid of me to not check that.
That change alone made it work fine. But i also updated my code to:
$(document).ready(function(){
$("a.sublink").click(function(){
$(this).parent("li").siblings(".subnav").toggle(200);
});
});
But I seems like using closests() instead of parents() would have done the trick just as good. Like this:
$(document).ready(function(){
$("a.sublink").click(function(){
$(this).closest("ul").find(".subnav").toggle(200);
});
});
Thanks for the fast answers!
加载中,请稍侯......
精彩评论