problème de Jquery slideToggle

Question

Im en utilisant les éléments suivants:

$(function() { 
    $(".StaffSubjectClassNav ul").hide(); 
     $('.StaffSubjectClassNav h3').click(function(){ 
     $(this).toggleClass('clicked'); 
     $(this).next('ul').slideToggle('100'); 
    }); 
}); 

Sur le code HTML suivant:

<h3><a href="link">Link</a></h3> 
<ul> 
<li>Link1</li> 
<li>Link2</li> 
<li>Link3</li> 
</ul> 

Il fonctionne parfaitement, se cache le <UL> et montre quand je clique sur le <H3>.

Cependant <a> est aussi un lien, comment puis-je configurer le script afin que s'ils cliquent sur le <a> dans la <H3> il ne fonctionne pas slideToggle?

Answer 1

Enveloppez le h3 dans le a et ajoutez l'action au lien et renvoyez false. Par exemple:

JS:

$(function() { 
    $(".StaffSubjectClassNav ul").hide(); 
    $('#h3_link').click(function(){ 
     $(this).toggleClass('clicked'); 
     $(this).next('ul').slideToggle('100'); 
     return false; 
    }); 
}); 

HTML:

<a href="link" id="h3_link"><h3>Link</h3></a> 
<ul> 
    <li>Link1</li> 
    <li>Link2</li> 
    <li>Link3</li> 
</ul> 

Vous pourriez avoir juste besoin de changer votre CSS un peu. Mais, c'est la bonne façon de le faire. Les liens sont censés être cliqués, pas les tags H3.