Question

<div>                                           
  <h3 class="ft-default bold inline-block">Callback</h3>                                            
     <ul class="Browsingtree02">
     <li><a href="/description.html">LoadCallBack</a></li>
     <li><a>ChangeCallBack</a></li>
     <li><a>beforeJobCallBack</a></li>
     <li><a>afterJobCallBack</a></li>
     <li><a>afterListCallBack</a></li>
     <li><a>afterReadCallBack</a></li>
     <li><a>tdClickCallBack</a></li>
     <li><a>trClickCallBack</a></li>
     <li><a>BlurCallBack</a></li>
     <li><a>parentSetDefault</a></li>
     <li><a>setValueCallBack</a></li>
     <li><a>keyDownCallBack</a></li>
     <li><a>afterNewCallBack</a></li>
     <li><a>afterDeleteCallBack</a></li>
  </ul>
</div>

===============================================================================

As above, you can see the first element ‘a’ with ‘href’ attribute.
Normally, it works fine, there’s no reason for it not to work,
because it’s a simple ‘a’ tag with href attribute.

But it gets a problem when I put toggle function on the element.

===============================================================================

$('#Left .Browsingtree02 li a').toggle(function() {
    $(this).addClass('Selected');   
    $(this).parent().parent().find('.Browsingtree03').show(200);
}, function() {
    $(this).parent().parent().find('.Browsingtree03').hide(200);
    $(this).removeClass('Selected');
});

===============================================================================

If this code doesn’t exist, the first ‘a’ with the attribute works just fine !!

But Browser can’t get the link and doesn’t move to the linked page at all…

Please help me out.

Answer 1

For some reasons, jQuery’s toggle always prevents the default action. See source code :

// Make sure that clicks stop
event.preventDefault();

So I suggest to not use the toggle function but simply to do this :

$('#Left .Browsingtree02 li a').click(function(){
    var nbclicks = $(this).data('nbc')||0;
    $(this).data('nbc', ++nbclicks);
    if (nbclicks%2) {
        $(this).addClass('Selected');   
        $(this).parent().parent().find('.Browsingtree03').show(200);
    } else { 
        $(this).parent().parent().find('.Browsingtree03').hide(200);
        $(this).removeClass('Selected');
    }
});​