Discussion :

[niro75]

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.

[Bovino]

mais je me retrouve avec l'image définie dans le css et celle que j'ajoute.

C'est normal, tu affectes une image de fond sur le li et quand tu cliques c'est sur le lien que tu en ajoutes une... tu auras donc les deux d'affichées...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(this).parent('li').css({ backgroundImage: "url(icons/folder_open.png)", backgroundRepeat: "no-repeat" })

[niro75]

oui c'est une erreur, ça marche avec ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(this).parent().css({ backgroundImage: "url(icons/folder_open.png)", backgroundRepeat: "no-repeat" })

merci.