<ul class="menu">>

     <li class="toggleSubMenu"><span>Titre</span>

          <div>Contenu</div>

     </li>

     <li class="toggleSubMenu"><span>Titre</span>

          <div>Contenu</div>

     </li>

</ul>

 

jQuery(function ($) {

    // On cache les sous-menus 

    // sauf celui qui porte la classe "open_at_load" : 

    $(".menu ul.subMenu:not('.open_at_load')").hide(); 

    // On sélectionne tous les items de liste portant la classe "toggleSubMenu" 

    // et on remplace l'élément span qu'ils contiennent par un lien : 

    $(".menu li.toggleSubMenu span").each( function () { 

        // On stocke le contenu du span : 

        var TexteSpan = $(this).text();

        $(this).replaceWith("<a href='image1.jpg' title='Afficher le sous-menu'>"+TexteSpan+"</a>") ; 

    }); 

 

	

	

    // On modifie l'évènement "click" sur les liens dans les items de liste 

    // qui portent la classe "toggleSubMenu" : 

    $(".menu li.toggleSubMenu > a").click( function () { 

        // Si le sous-menu était déjà ouvert, on le referme : 

        if ($(this).next("ul.subMenu:visible").length != 0) { 

            $(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } ); 

        } 

        // Si le sous-menu est caché, on ferme les autres et on l'affiche : 

        else { 

            $(".menu ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") }); 

            $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );

            // On récupère la valeur du href

            var mon_image = $(this).attr('href');

            $("body").css({'background-image':'url(IMG/'+mon_image+')'});

        }

        // On empêche le navigateur de suivre le lien

        return false; 

    });

});