Menu dynamique avec JQuery – Le blog de Sylvain

Dans mes débuts avec la bibliothèque JQuery voici les premiers résultats avec le menu du blog, à côté de chaque partie il y a un moins (ou un plus) qui permet de développer (ou diminuer) le sous-menu. Voici le code, je ne sais pas si on peut l’améliorer mais c’est sûrement le cas vu les ralentissements générés sous ie (inexistants sous safari).

Afficher le code source

$(document).ready(function() { //on ajoute le + et le - qui permettront de masquer les données pour chaque titre H2


 $("#sidebar").find("h2").each(function(i)

 {

 $(this).html("CODE HTML IMAGES"+ $(this).html());
  });
 $("img[@src*=images/puce_plus.gif]").hide("fast"); // on masque le +
 $("img[@src*=images/puce_moins.gif]").click(function() //quand on clic sur le moins

 {
 $(this).hide("fast"); //on masque le -

 $(this).parents("h2").find("img[@src*=images/puce_plus.gif]").show("fast"); 
//on affiche le +
 //on cache les p, ul, h3 et autres éléments du menu
 $(this).parents("h2").parents("div").not("#page").not("#sidebar").not("#main")
.not("#content").find("p").slideUp("slow");

 $(this).parents("h2").parents("div").not("#page").not("#sidebar").not("#main")
.not("#content").find("ul").slideUp("slow");

 $(this).parents("h2").parents("div").not("#page").not("#sidebar").not("#main")
.not("#content").find("h3").slideUp("slow");
 //pour des raisons esthétiques je modifie le border du h2
 $(this).parents("h2").css("border-width","1px 0 0px 1px");
 //pour le bas du menu je remet le border normalement
 $("#referents").find("h2").css("border-width","1px 0 1px 1px");
    });
 $("img[@src*=images/puce_plus.gif]").click(function() //quand on clic sur le +

 {

 $(this).hide("fast"); //on masque le +
  $(this).parents("h2").find("img[@src*=images/puce_moins.gif]").show("fast"); 
//on affiche le -
 //on affiche se qui vient d'être masqué
  $(this).parents("h2").parents("div").not("#page").not("#sidebar").not("#main")
.not("#content").find("p").slideDown("slow");

  $(this).parents("h2").parents("div").not("#page").not("#sidebar").not("#main")
.not("#content").find("ul").slideDown("slow");

  $(this).parents("h2").parents("div").not("#page").not("#sidebar").not("#main")
.not("#content").find("h3").slideDown("slow");

 //on remet le border normalement
  $(this).parents("h2").css("border-width","1px 0 1px 1px");
   });

}); Affichage des images : [img src=\"images/puce_moins.gif\"] [img src=\"images/puce_plus.gif\"]