Menu Accordéon jQuery

Question

Ceci est juste une question vraiment novice sur jQuery mais je l'utilise juste pour créer un simple menu accordéon. Le ouput HTML est comme ceci:

<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>                       

Et le jQuery J'ai actuellement est:

$(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 
    }); 
} 

});

Ceci est le plus proche que je peux l'obtenir pour fonctionner pleinement, mais la seule chose qui ne fonctionne pas est l'animation à bascule. Au lieu d'une transition lente, il saute simplement à droite. Ce que je veux essentiellement, c'est obtenir l'effet de transition lente mais aussi retourner false (empêcher l'action du navigateur par défaut de suivre l'ancre de lien) si l'élément de menu a des enfants (une liste secondaire - comme montré ci-dessus sur Menu Point deux). J'ai besoin du Menu Item One pour retourner vrai et aller directement à cette page.

Merci

Answer 1

Im comme vous et aiment comprendre les choses à apprendre ... Je pensais que ça allait être facile, mais bon sang que j'ai passé 30 minutes de débogage ce fichu truc ..

Voir 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 pas un expert .. Je remarqué plus tard que les sous-éléments des éléments jettent l'événement, et assez curieusement trouver() retourne un enfant <ul> même si l'élément sous jeté l'événement !? Donc, je ne pouvais pas utiliser evt.target==this pour tester un événement barboté. L'événement sub elements renvoie le parent entier li! = S Alors j'ai jeté un hack! Peut-être qu'il y a une meilleure méthode.

Answer 2

HTML:

<dl> 

<dt><a href="#">Menu Item One</a></dt> 
<dd> 
    <ul> 
     <li><a href="#">Sub Menu Item One</a></li>   
    </ul> 
</dd> 

<dt><a href="#">Menu Item Two</a></dt> 
<dd> 
    <ul> 
     <li><a href="#">Sub Menu Item One</a></li> 
     <li><a href="#">Sub Menu Item Two</a></li> 
    </ul> 
</dd> 

<dt><a href="#">Menu Item Three</a></dt> 
<dd> 
    <ul> 
     <li><a href='#'>Sub Menu Item One</a></li> 
     <li><a href='#'>Sub Menu Item Two</a></li> 
     <li><a href='#'>Sub Menu Item Three</a></li>    
    </ul> 
</dd> 

</dl> 

JQuery:

<script> 
    $("dd").hide(); 

    $("dt a").click(function(e) { 
     $(e.target).parent().next().slideToggle(); 
    }); 
</script>