Navigation with sub-menu fade effect, Links broken - jQuery
I have a navigation menu that works the way I want it to, but when I click on a link that is in the sub-menu it doesn't load the page. It will only start the fadeout effect. I dont know why the link will not load the page. If I turn off jQuery, it works fine. Any idea why this is happening and how to fix it?
var delay = 100;
var fade = 400;
$j(function(){
$j('#access-navi li.sub').toggle(function(){
$j(this).find('ul li a').each(function(i){
$j(this).delay(i*delay).fadeIn(fade);
});
}, function() {
$j('#access-navi li.sub').find('ul li a').fadeOut(fade/2);
});
});
HTML:
<div id="access-navi" class="no-j" role="navigation">
<ul>
<li><a href=开发者_如何学Python"/">Home</a></li>
<li class="sub"><a href="#">Code</a>
<ul>
<li><a href="/code/html-css/">Html.Css</a></li>
<li><a href="/code/java/">Java</a></li>
<li><a href="/code/jquery/">jQuery</a></li>
<li><a href="/code/php/">Php</a></li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>
$j(function(){
var inner="";
$j('#access-navi .sub > a').toggle(function(){
inner=$j(this).parent().find('ul li');
inner.each(function(i){
$j(this).delay(i*delay).fadeIn(fade);
});
},function(){
inner.fadeOut(fade/2);
});
});
Oh I'm hiding LIs not LIs A in the .sub
no point of hiding only anchors IMO
The faiding isn't happening but I'm not sure if that was a side effect or intentional behavior as you'll reload the page. I'm using inner
variable to cache the result of this jQuery selector instead of reading it once again in the next toggle.
Let me know if you'll have any question, I'll gladly help :)
Cheers
G.
精彩评论