MENU ACCORDEON

Bonjour,

Je ne connais pas trop Javascript et en fait j'ai du mal à l'assimiler.
Malgré plusieurs essaies et tentatives, je n'arrive pas à faire en sorte que lorsque je clique sur "PRODUIT", le sous-menu apparaisse et qu'ensuite je puisse cliquer sur "Produit sous-menu A" pour que le sous-sous-menu apparaisse. Aujourd'hui, "PRODUIT" est déjà déroulé. Voici mon code :

<div class="sous-menu">
		 <li><a href="index.html">ACCUEIL</a></li>
		 <li><a href="historique.html">HISTORIQUE</a></li>
		 <li><a href="contact.html">CONTACT</a></li>
		 
		<ul class="navigation">
	 <li class="toggleSubMenu"><span>PRODUITS</span>
	 
		<li class="toggleSubMenu"><span>Produit sous-menu A</span>
	<ul class="subMenu">
<li><a href="c.html">Sous-sous menu 1</a></li>
<li><a href="g.html">Sous-sous menu 2</a></li>
<li><a href="e.html">Sous-sous menu 3</a></li>
<li><a href="s.html">Sous-sous menu 4</a></li>
</ul>
</li>

<li class="toggleSubMenu"><span>Produit sous-menu B</span>
	<ul class="subMenu">
<li><a href="a.html">Sous-sous menu 1</a></li>
<li><a href="b.html">Sous-sous menu 2</a></li>
<li><a href="c.html">Sous-sous menu 3</a></li>
<li><a href="f.html">Sous-sous menu 4</a></li>
</ul>
</li>

</ul>
</div>

Et le code Javascript est le suivant :

$(document).ready( function () {
    // On cache les sous-menus
    // sauf celui qui porte la classe "open_at_load" :
    $(".navigation ul.subMenu:not('.open_at_load')").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").slideUp("normal", function () { $(this).parent().removeClass("open") } );
        }
        // 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;
    });

} ) ;
// -->	</script>

Merci pour votre aide.
A+

Bonjour,

Deux choses:

1. Ton code HTML comporte des erreurs (éléments LI directement dans un DIV, par exemple).
2. Le menu accordéon proposé dans un tutoriel sur Alsacréations n'est pas prévu pour une structure à trois niveaux. Uniquement pour une structure à deux niveaux (rubrique > pages).

Adapter ce menu pour une structure sur trois niveaux est possible, mais demande:
- une bonne maitrise de HTML et CSS;
- une connaissance minimale de JavaScript et jQuery;
- des adaptations importantes, de sorte qu'il est presque préférable de coder son propre script à partir de rien, en s'inspirant de loin de l'exemple sur Alsacréations si on le souhaite mais pas plus...

Bonjour,

Merci d'avoir répondu. Je vais corriger ces li dans des div puisque tu m'indiques que c'est une erreur. Et essayer de trouver un nouveau script pour répondre à ma demande.

Merci.
A+