[résolu]Menu accordéon - sous-menus restent ouverts

Bonjour,

Je sais que cela va faire le 1001e sujet concernant comment faire pour garder ouvert un sous-menu accordéon lorsqu'on clique sur un lien de ce dernier.

J'ai bel et bien parcouru le forum mais je n'ai toujours pas réussi à résoudre mon problème.

Donc comme la plupart des gens, j'ai suivi ce tutoriel : http://www.alsacreations.com/tuto/lire/602-Creer-un-menu-accordeon-avec-jQuery.html

Je l'ai ensuite adapté à mon site au niveau de CSS et quelques actions lorsqu'on clique sur les liens etc...

A savoir mon site est dynamique, c'est à dire que j'ai fait une page index.php dans laquelle j'ai défini un style pour toutes les autres pages, et il n'y a juste que le contenu qui change.

J'en ai testé des variantes mais rien ne changent ...c'est pour cette raison que j'ai décidé de demander votre aide.

Voici un bout de code qui ressemblent fortement au tuto

$(document).ready( function () { 
    // On cache les sous-menus : 
    $(".navigation ul.subMenu").hide(); 
    // On sélectionne tous les items de liste portant la classe "toggleSubMenu" 
    // et on remplace l'élément span qu'ils contiennent par un lien : 
    $(".navigation li.toggleSubMenu span").each( function () { 
        // On stocke le contenu du span : 
        var TexteSpan = $(this).text(); 
        $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ; } ) ; 
	 
    // On modifie l'évènement "click" sur les liens dans les items de liste 
    // qui portent la classe "toggleSubMenu" : 
        $(".navigation li.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").slideDown("normal", function ({$(this).parent().removeClass("open") }); 
                //$(this).next("ul.subMenu").slideDown("normal");			
            } 
        // Si le sous-menu est caché, on ferme les autres et on l'affiche : 
            else { 
                $(".navigation ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") }); 
                $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") }); 
                   } 
// On empêche le navigateur de suivre le lien : 
return false; 
		});

Je ne maitrise pas vraiment le javascript...

Merci d'avance pour votre temps et votre aide
Modifié par manchester_010 (24 Aug 2011 - 16:21)

Pour ceux qui s'intéressent à la solution, vous pouvez télécharger le code en entier via ce lien :

http://www.megaupload.com/?d=7NHCH6HN

Voilà

PS : J'ai totalement modifié le code par apport à celui que j'ai posté dans mon 1er message
Modifié par manchester_010 (24 Aug 2011 - 16:33)

Bonjour manchester_010,

Le mieux est de poster toi-même la solution au problème rencontré afin que tout le monde puisse en profiter.
Concernant ta demande de modification de statut, il te suffit d'éditer ton premier message, et de rajouter le tag [résolu] dans le titre de cestuy-là...comme cela est mentionné dans les règles que tu as lues et approuvées lors de ton inscription

Cordialement,
Sylvain

Hello
la solution m'interresse malheuresement megaupload n'est plus,
est il possible de poster la soluce
merci

Salut, alors voici ma dernière version pour résoudre ce problème. Il faut noter que le code a évolué depuis la dernière fois ou j'ai posté le problème...

Alors dans le code ci-dessous tu le places entre tes balises <header>....</header>

<!--Debut du script pour le menu-->
<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="script/menu/ddaccordion.js"></script>
<script type="text/javascript">
ddaccordion.init({
	headerclass: "submenuheader", //Shared CSS class name of headers group
	contentclass: "submenu", //Shared CSS class name of contents group
	revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
	mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
	defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
	onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
	animatedefault: false, //Should contents open by default be animated into view?
	persiststate: true, //persist state of opened contents within browser session?
	toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
	//togglehtml: ["suffix", "<img src='plus.gif' class='statusicon' />", "<img src='minus.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
	animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
	oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
		//do nothing
	},
	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
		//do nothing
	}
})
</script>
<!--Fin du script pour le menu-->

Ensuite tu peux trouver sur le net le fichier du script : jquery-1.4.2.min.js ou une version plus récente.

Et pour terminer le code du fichier ddaccordion.js que tu peux télécharger via : http://depositfiles.com/files/l22nv30d3

Je reste à ta disposition.

Bon développement.