72Fermer74
BrunniLe 04/05/2010 à 20:09
Bon j'ai essayé de faire un super menu dynamique avec JQuery. J'ai une page avec un CSS de façon à afficher un menu basé sur des <ul> (sur autant de niveaux que nécessaire). Exemple:
<ul>
   <li>Accueil</li>
   <li>Mes softs<ul>
      <li>Inutile</li>
      <li>Pas mieux</li>
   </ul></li>
</ul>

On appellera les éléments "Accueil" et "Mes softs" comme menus racine. Ensuite je fais ça:
// Ajoute un nom de classe pour tous les éléments du menu, histoire qu'on puisse les retrouver
var i = 0;
$("#menu").find("li").each(function() {
   $(this).addClass("element" + i++);
});
// Au clic sur un élément
$("#menu li").click(function() {
   event.stopPropagation();
   // Cache les éléments racine qui ne contiennent pas d'élément répondant à la classe de l'élément sélectionné
   var classe = $(this).attr("class");
   $("#menu").find("li").each(function() {
      if ($(this).find("." + classe).length == 0)
         $(this).find("ul").hide();
   });
   $(this).find('ul:first').show();
});

Concrètement: quand on clique sur un élément, je ferme tous les sous-menus racine dont cet élément ne fait pas partie. C'est assez con, mais ça n'est VRAIMENT pas évident à exprimer en JQuery sorry Y a moyen de faire moins dégueu? grin