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\"]
