Bonjour,


Je construit un menu deroulant vertical à partir d'un fichier xml.
Au titres des menus sont associés une image définie dans via la feuille de style.

html :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
 
<ul>
        <li class="titre" id="truc"><a href="#none">truc</a>
            <ul id="sous_truc">
...
css :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
.titre{
 
font-family: Arial, sans-serif;
 color: black;
 list-style-type: none;
 background-image: url(icons/folder.png);
 background-repeat: no-repeat;
 background-position: 0 -0.12em;
 padding-left: 20px;
font-size: 12px;
font-weight: normal;
margin: 0;
}
Ce que je n'arrive pas à faire, c'est quand je clic sur cet élément, l'image change (image 1 : folder fermé - image 2 : folder ouvert)

j'ai ajouté ça a mon code :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
 
$(".titre a").click(function(){
 
     $(this).css({ backgroundImage: "url(icons/folder_open.png)", backgroundRepeat: "no-repeat" })
});
mais je me retrouve avec l'image définie dans le css et celle que j'ajoute.
Comment finalement modifier la propriété?

merci de votre aide.