开发者

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜