changer image d'un li quand clic dans un menu
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:
1
2
3
4
5
|
<ul>
<li class="titre" id="truc"><a href="#none">truc</a>
<ul id="sous_truc">
... |
css :
Code:
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:
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.
