[Résolu] Menu accordéon JQuery, garder sous menu ouvert - encore

Bonjour à tous,
J'ai lu tous les sujets concernant le tuto du menu accordéon avec JQuery.

Mon menu fonctionne bien sauf si je veux que mon sous menu reste ouvert quand je clique sur un de ces liens. C'est le fameux "open_at_load"...

Mon site est propulsé par CMS Made Simple. J'ai réussi à modifier le template du menu pour qu'il ajoute une classe "active" au <li> du sous menu à rester ouvert.

Donc, j'essais d'ajouter dans le script du tuto, quelque chose qui va ressembler à:

$(".menu ul.sousmenu li").hasClass("active") je laisse le sous menu ouvert;

J'ai fait des essais sans obtenir le résultat souhaité. Je continue à lire la docu pour trouver une solution à mon problème.

Merci à l'avance si vous pouvez me donner une piste à suivre.
Modifié par Mabelle (12 Sep 2010 - 19:01)

Salut,

ce cas de figure est prévu par le tutoriel sur la page améliorer l'ergonomie au niveau du titre "Garder un sous-menu ouvert".

Bonjour, oui je sais bien et je l'ai bien compris.

Cependant, avec le template du menu de Made Simple que j'utilise, il m'est plus facile d'attribuer une classe à mon li qu'une classe open_at_load à mon ul de sous menu. D'ailleurs, j'ai demandé de l'aide sur le forum de MS aussi.

Voilà pourquoi je cherche une autre solution.

Merci

Heu, une ptite solution pas trop zolie : Si tu ne peux pas mettre une classe "open_at_load" à un ul mais seulement une classe "active" au menu, jQuery peut le faire pour toi : (en me basant sur un de tes débuts)

$(".menu ul.sousmenu li.active > ul").addclass("open_at_load") ;

ON OUBLIE

En faisant plus propre, il vaut mieux changer ça :

    // On cache les sous-menus 
    // sauf celui qui porte la classe "open_at_load" : 
    $(".navigation ul.subMenu:not('.open_at_load')").hide(); 

par ça :

    // On cache tout les sous-menus 
    // on affiche celui qui est derrière un "li.active" : 
    $(".navigation ul.subMenu").hide(); 
    $(".navigation li.active > ul.subMenu").show(); 

En gros, je ferme tous les sous-menus, puis j'ouvre celui qui est directement derrière une "li" avec une classe active. C'est plus beau, non

jQuery c'est vraiment génial
Modifié par Borak (11 Sep 2010 - 16:57)

Ah oui, ça me semble une bonne solution

Je vais travailler là dessus d'ici quelques jours et je vous reviens pour les résultats.

Je ne fais que commencer à me familiariser avec JQuery... Et je crois que je vais continuer

Merci Borak !

Bonjour,
J'ai rapidement testé cette solution:

// On cache tout les sous-menus  
    // on affiche celui qui est derrière un "li.active" :  
    $(".menu ul.sousmenu").hide();  
    $(".menu li.active > ul.sousmenu").show(); 

qui ne fonctionne pas. Je crois que c'est dû à une mauvaise sélection.... Mon code html ressemble à ceci:

<ul class="menu"> 
  <li class="toggle"><a class="toggle" href="#">À propos</a> 
      <ul class="sousmenu"> 
         <li class="active"><a href="lien 1.1">Mission et historique</a></li> 
         <li><a href="lien 1.2">Conseil d'administration</a></li> 
         <li><a href="lien 1.3">Devenir membre</a> </li>
      </ul></li>
</ul>

Je vais continuer à tester plus tard dans la journée.

Merci à qui m'aidera

Ben oui, si c'est le "li" qui est en dessous et pas au dessus (ou l'inverse...).

Bon, dans ce cas, c'est plutôt ça :

   // On cache tout les sous-menus  
    // on affiche celui qui est derrière un "li.active" :  
    $(".navigation ul.subMenu").hide();  
    $(".navigation li.active").parent("ul").show(); 

Borak, tu es mon sauveur

Ça fonctionne impeccablement.

Merci beaucoup pour ton aide. En plus, j'ai le goût d'aller plus loin avec jquery.