[Résolu] Dérouler menu en accordeon au clic

Bonjour à tous !

J'utilise le script pour le menu en accordéon issu du tutoriel d'alsacreations, quelque peu modifié (3 niveaux).

Lorsque je clique sur un élément du menu, la page se recharge complètement et donc le menu se recharge également... il s'enroule donc complètement.

J'aimerais donc que lorsque je clique sur le produit de mon choix (par exemple le produit "funchal" est associé à la page /produits/tables-repas/funchal.html) et que j'arrive sur la page, le menu reste déroulé sur le <li> comprenant le produit !

(J'ai essayé de faire une iframe en intégrant le menu, mais le menu s'affiche en texte brut, sans css, comme si le jquery ne fonctionnait pas )

Script :

<script type="text/javascript"> // SCRIPT MENU EN ACCORDEON
		
		$(document).ready( function () {
			// On cache les sous-menus
			// sauf celui qui porte la classe "open_at_load" :
			$("ul.subMenu:not('.open_at_load')").hide();
			$("ul.subMenu2:not('.open_at_load')").hide();
			// On selectionne tous les items de liste portant la classe "toggleSubMenu"
		
			// et on remplace l'element span qu'ils contiennent par un lien :
			$("li.toggleSubMenu span").each( function () {
				// On stocke le contenu du span :
				var TexteSpan = $(this).text();
				$(this).replaceWith('<a href="" title="">' + TexteSpan + '</a>') ;
			} ) ;
		
			// On modifie l'evenement "click" sur les liens dans les items de liste
			// qui portent la classe "toggleSubMenu" :
			$("li.toggleSubMenu > a").click( function () {
				// Si le sous-menu etait deja ouvert, on le referme :
				if ($(this).next("ul.subMenu:visible").length != 0) {
					$(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
				}
				// Si le sous-menu est cache, on ferme les autres et on l'affiche :
				else {
					$("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
					$("ul.subMenu2").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;
			});
			 $("li.toggleSubMenu2 > a").click( function () {
				// Si le sous-menu etait deja ouvert, on le referme :
				if ($(this).next("ul.subMenu2:visible").length != 0) {
					$(this).next("ul.subMenu2").slideUp("normal", function () { $(this).parent().removeClass("open") } );
				}
				// Si le sous-menu est cache, on ferme les autres et on l'affiche :
				else {
					$("ul.subMenu2").slideUp("normal", function () { $(this).parent().removeClass("open") } );
					$(this).next("ul.subMenu2").slideDown("normal", function () { $(this).parent().addClass("open") } );
				}
				// On empêche le navigateur de suivre le lien :
				return false;
			});
		 } ) ;
		
	</script>  	

Une partie du menu :

<li class="toggleSubMenu"><span>PRODUITS</span>
			<ul style="display:block;" class="subMenu">
			  <li style="position: static; " class="toggleSubMenu2 open"><a href="#">Table repas et mange debout</a>
				<ul style="display: block; " class="subMenu2">
					<li title="" class="toggleSubMenu3"><a href="http://localhost/atelier/produits/tables-repas/funchal.php">&gt; Funchal</a></li>
					<li title="" class="toggleSubMenu3"><a href="#">&gt; Sorthela</a></li>
					<li title="" class="toggleSubMenu3"><a href="#">&gt; Parthenay</a></li>
				</ul>
			  </li></ul></li>

Modifié par hender (22 Sep 2012 - 12:56)

Bonjour 6l20 et merci pour ta réponse!

En fait, je me suis déjà inspiré de ce site pour créer mon menu à trois niveaux. Ce que je cherche à faire, c'est à le dérouler lorsque la nouvelle page est chargée

Bonjour,

Dans le tutoriel :

a écrit :
Si votre site est statique, il suffit d'ajouter à la main une classe (par exemple "open_at_load") sur le sous-menu que vous voulez garder ouvert (en fonction de la page).
Pour les sites dynamiques, il est aussi possible de générer cette classe, en fonction d'une variable $_GET['page'] ou autre.

A tout hasard, quelques précisions de Florent pour marquer la page en cours.

Comment procèdes-tu pour marquer cette page (et que le script fonctionne, ie ne ferme pas le lien qui porte la class "open_at_load") ?
Tu as une page en ligne ?

Merci beaucoup pour ta réponse j'étudie ça de suite !

Voila un lien : http://bit.ly/Umhwx6

Attention, la seule page que j'ai créé pour l'instant c'est : produits > tables-repas > funchal

Ca fonctionne sous IE pour moi en tout cas. En fait, j'ai juste ajouté une ligne par rapport au script sur http://brocollection.free.fr/ (cf mon deuxième message sur un autre post). La classe "ul.subMenu" était masquée, mais pas la classe "ul.subMenu2". Je l'ai juste masquée avec la ligne ci-dessous au début du code et ça a fonctionné

$("ul.subMenu2:not('.open_at_load')").hide();

Modifié par hender (22 Sep 2012 - 12:56)