[Résolu] Jquery : slideUp/SlideDown sur une liste avec $(this).next()

Bonjour

J'essaye d'adapter le tuto de Thomas D pour générer un menu en accordéon vertical sur un liste <ul>.

Voici mon code HTML simplifié:

<ul class="concertsJours">
	<li>
		<span class="aaa">texte1</span> <span class="bbb">texte2</span> 
		<span class="toggleSubMenu"></span>
		<ul class="subMenu">
			<li>texte3</li>
		</ul>
	</li>
</ul>

Le Javascript ci-dessous modifie dynamiquement le span ayant pour classe toggleSubMenu pour y ajouter un lien et ensuite modifie l'action onClick de ce lien pour afficher la liste <ul> suivante.

<!-- 
$(document).ready( function () { 
    // On cache les sous-menus : 
    $(".concertsJours ul.subMenu").hide(); 
    // On sélectionne tous les span portant la classe "toggleSubMenu" 
 
    // et on les remplace par un lien : 
    $(".concertsJours span.toggleSubMenu").each( function () { 
        $(this).replaceWith('<span class="toggleSubMenu"><a href="#" title="Plus d\'infos sur le concert" >' + 'info' + "</a></span>") ;
		
    } ) ; 
 
    // On modifie l'évènement "click" sur les liens dans les span qui portent la classe "toggleSubMenu" : 
    $(".concertsJours span.toggleSubMenu > a").click( function () { 
        // Si le sous-menu était déjà ouvert, on le referme : 
		if ($(this).next("ul.subMenu:visible").length != 0) { 
            $(this).next("ul.subMenu").slideUp("normal");
			window.alert('toto1');
        } 
        // Si le sous-menu est caché, on ferme les autres et on l'affiche : 
        else { 
            $(".concertsJours ul.subMenu").slideUp("normal"); 
            $(this).next("ul.subMenu").slideDown("normal");
			window.alert('toto2');
        } 
        // On empêche le navigateur de suivre le lien : 
        return false; 
    });     
 
 
} ) ; 
// --> 

Le remplacement du lien fonctionne, mais pas l'affichage de la liste <ul> suivante quand on clique:

 // Si le sous-menu est caché, on ferme les autres et on l'affiche : 
        else { 
            $(".concertsJours ul.subMenu").slideUp("normal"); 
            $(this).next("ul.subMenu").slideDown("normal");
			window.alert('toto');
        } 

Une idée du pourquoi ?
(pour info dans le tuto au lieu de remplacer un span on remplace un <li> par un <li> contenant un lien)
Modifié par AnatoleL (18 Oct 2009 - 09:01)