Menu Accordéon : Variation

Bonjour,

Je regarde depuis très longtemps ce site, et j'ai enfin fini par m'inscrire

Pour les menus accordéons en jQuery, je n'ai pas pris exactement les mêmes choix. Je vais donc partager ma solution

Le code html reste proche, une liste, les titres de sous-menus sont encadrés par un span, mais je n'ai pas de sous-classe pour les sous-menus :

<ul class="menuderoul">
   <li><a href="#">Menu1</a></li>

   <li><span>SsMenu2</span>
      <ul>
         <li><a href="#">Menu1</a></li>
         <li><a href="#">Menu2</a></li>
         <li><a href="#">Menu3</a></li>
      </ul>
   </li>

   <li><span>SsMenu3</span>
   <ul>
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu2</a></li>
      <li><span>SsSsMenu3</span>
         <ul>
            <li><a href="#">Menu1</a></li>
            <li><a href="#">Menu2</a></li>
         </ul>
      </li>
      <li><span>SsSsMenu33</span>
         <ul>
            <li><a href="#">Menu1</a></li>
            <li><a href="#">Menu2</a></li>
            <li><a href="#">Menu3</a></li>
            <li><a href="#">Menu4</a></li>
            <li><a href="#">Menu5</a></li>
         </ul>
      </li>
      <li><a href="#">Menu5</a></li>
   </ul>
   </li>

   <li><a href="#">Menu4</a></li>
</ul>

Par contre, pour le jquery, il me semble que j'ai fait "plus" simple (bon faut dire qu'on préfère toujours son propre code). Et c'est aussi que je n'aime pas la fonction "...each()".

1) je cache les menus, et je mets des liens de débranchement à l'intérieur des span (menu 1er niveau et 2nd niveau) :

$(document).ready(function() 
   {  $("ul.menuderoul li ul").hide() ;
      $("ul.menuderoul > li span").wrapInner('<a href="#" onclick="menuderoul(this);return false;"></a>') ;
      $("ul.menuderoul ul > li span").wrapInner('<a href="#" onclick="menuderoulss(this);return false;"></a>') ;
   }
)

2) Quand on clique sur un premier niveau de menu, on cache, l'ensemble et on affiche le menu concerné. Si on a cliqué sur un menu déroulé, on le ferme.

function menuderoul(id)
{  if ($(id).parent().next().is(":hidden"))
   {  $("ul.menuderoul > li > ul").slideUp("normal") ;
      $("ul.menuderoul > li").removeClass("ouvert") ;
      $(id).parent().next().slideDown("normal") ;
      $(id).parent().parent().addClass("ouvert") ;
   }
   else
   {  $(id).parent().next().slideUp("normal") ;
      $(id).parent().parent().removeClass("ouvert") ;
   }
}

3) On fait de même sur les sous-menus.

function menuderoulss(id)
{  if ($(id).parent().next().is(":hidden"))
   {  $("ul.menuderoul ul > li ul").slideUp("normal") ;
      $("ul.menuderoul ul > li").removeClass("ouvert") ;
      $(id).parent().next().slideDown("normal") ;
      $(id).parent().parent().addClass("ouvert") ;
   }
   else
   {  $(id).parent().next().slideUp("normal") ;
      $(id).parent().parent().removeClass("ouvert") ;
   }
}

La feuille de style, je la laisse à écrire

Dans tous, les cas, je mets toujours une classe "ouvert" sur les menus que je déplie.

Bon, mon code doit aussi pouvoir être amélioré

Voila pour une technique un chouïa différente. Et merci pour tout ce que j'ai appris sur le site (et ca commence par le xhtml )
Modifié par Borak (28 Jul 2010 - 07:32)

Je viens de faire évoluer le script. Ca marche maintenant, pour autant de niveaux de sous-menu que nécessaire. Le html ne change pas.

1) Au début je cache les menus, et je mets des liens de débranchement à l'intérieur des span (menu 1er niveau et 2nd niveau) :

$(document).ready(function() 
   {  $("ul.menuderoul li ul").hide() ;
      $("ul.menuderoul li > span").wrapInner('<a href="#" onclick="menuderoul(this);return false;"></a>') ;
   }
)

2) La fonction pour cacher et afficher les menus, ss-menu, ss-ss-menu, ...

// Menu deroul
function menuderoul(id)
{  if ($(id).parent().next().is(":hidden"))
   {  // On cache les autres menus de même niveau
      $(id).parent().parent().siblings().children("ul").slideUp("normal") ;
      $(id).parent().parent().siblings().removeClass("ouvert") ;
      // On affiche notre menu 
      $(id).parent().next().slideDown("normal") ;
      $(id).parent().parent().addClass("ouvert") ;
   }
   else
   {  // On cache notre menu 
      $(id).parent().next().slideUp("normal") ;
      $(id).parent().parent().removeClass("ouvert") ;
   }
}

Le tout était de gérer un peu plus précisément le DOM
Modifié par Borak (31 Jul 2010 - 09:50)

Salut Borak !
Tu aurais une url d'exemple d'utilisation de ton script stp ?
Merci

Bonjour,
Menu Accordéon : Variation de Borak du 27 Juillet 2010
J'essaie d'adapter à mon besoin le menu déroulant proposé par Borak mais 2 points me gènent:

1 -

Borak a écrit :

Quand on clique sur un premier niveau de menu, on cache, l'ensemble et on affiche le menu concerné. Si on a cliqué sur un menu déroulé, on le ferme.

Quand je clique sur un 1er niveau je souhaite fermer (et non cacher) un niveau 3 ouvert à ce moment.
Est-ce possible?

2 - quand je clique sur un premier niveau qui n'a pas de sous-niveau, une autre branche du menu ouverte à ce moment n'est pas refermée.
La encore, est-ce possible?

Merci à qui pourra me donner une piste de soluton.
Chapeau à Borak pour la concision de son javascript revu fin Juillet, même si je n'y comprends pas grand-chose