jQuery Accordion Menu

Question

This is just a really novice question on jQuery but I'm just using it to create a simple accordion menu. The HTML ouput is like this:

<ul id="nav-sub">
<li class="sub-level-0"><a href="#">Menu Item One</a></li>
<li class="parent-here last sub-level-0"><a href="#">Menu Item Two</a>   
    <ul>
        <li class="here sub-level-1"><a href="#">Sub Menu Item One</a></li>
        <li class="last sub-level-1"><a href="#">Sub Menu Item Two</a></li>
    </ul>  
</li>                                                                                        

And the jQuery I currently have is:

$(document).ready(function() {

// Show the children of the first product on page load but leave the others hidden
$("ul#nav-sub li.parent-here ul").show();

// Then attach a visibility toggle to each of the parents 
if ( $("ul#nav-sub li.sub-level-0 ul").size > 0 ) {
    $("ul#nav-sub li.sub-level-0 > a").click(function(){
        $(this).next().slideToggle("slow");
        return false; //Prevent the browser jump to the link anchor
    });
}

});

This is the closest I can get it to fully working but the only thing that doesn't work is the toggle animation. Instead of a slow transition it simply jumps right open.

What I basically want is to get the slow transition effect but ALSO to only return false (prevent the default browser action of following the link anchor) if the menu item has any children (a sub list - as shown above on Menu Item Two). I need Menu Item One to return true and go straight to that page.

Thanks

Answer 1

YAY!! I got it!!! haha ... Yea Im like you and like to figure things out to learn...I thought it was going to be easy but jeez I spent 30 mins debugging the damn thing.. I was about to post another question about my answer to you question on SO... then i found the ^&*^#$, it was a <ul/>I typed in! =(

Im so happy and powerful now... happiness and power to everybody =)

See http://jsfiddle.net/QcBNK/92/

Html:

<ul id="nav-sub">
    <li class="sub-level-0"><a href="#">Menu Item One</a>
    <ul>
        <li class="sub-level-1"><a href="#">Sub Menu Item One</a></li>
        </ul>
      </li>
     <li class="sub-level-0"><a href="#">Menu Item Two</a>   
      <ul>
                <li class="sub-level-1"><a href="#">Sub Menu Item One</a></li>
                <li class="sub-level-1"><a href="#">Sub Menu Item Two</a></li>
      </ul>  
      </li>    
</ul>

JQuery :

$(document).ready(function() {
    //hide all SUB elements
    $(".sub-level-1").hide(); 
    //attach click to top elements only
    $("li.sub-level-0").mousedown(function(evt) {
        //find the sub element and toggle it..
       if(($(evt.target).text().indexOf("Sub"))!=0) {//Bad hack! sry =(
        $(this).find("ul .sub-level-1").slideToggle();
      }
    });

});

Notes: Im no expert.. I noticed later that the sub items elements throw the event, and oddly enough find() returns a child <ul> even if the sub element threw the event!? So I could not use evt.target==this to test for a bubbled event. The sub elements event returns the entire parent li! =S So I threw in a haack! Maybe there is a better method.