Modification background sur H2 (JQuery) [Résolu]

[Tobear91]

Bonjour à tous, je réalise en ce moment un "menu déroulant" avec ceci :http://flowplayer.org/tools/demos/tabs/accordion.html

Je l'ai quelque peu modifier, surtout le css que voici :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/* root element for accordion. decorated with rounded borders and gradient background image */
#accordion {
	margin-bottom: 30px;
}
 
/* accordion header */
#accordion h2 {
	padding: 4px 0 0 20px;
	height: 16px;
	background: url(../images/offres/Puce1_2.png) no-repeat;
	font-size: 12px;
	font-weight: normal;
	cursor: pointer;
	color: #047;
}
 
#accordion h2:hover {
	text-decoration: underline;
}
 
/* currently active header */
#accordion h2.current {
	cursor: default;
	background: url(../images/offres/Puce2_2.png) no-repeat;
}
 
/* accordion pane */
#accordion .pane {
	display: none;
	padding: 5px 0 5px 15px;
	font-size: 12px;
}
 
#accordion .pane li {
	list-style-image: url(../images/offres/puce3.png);
}

Comme vous pouvez le voir lorsque je clique sur un titre je veux changer ma puce, cette transformation fonctionne parfaitement sous Firefox et sous Chrome, le seul hic est IE

Est ce que quelq'un pourrait m'aider à trouver une petite solution merci beaucoup et bonne fin de journée

[Nesmontou]

Bonjour,

Il nous faudrait un peu plus de détails pour pouvoir t'aider :

• Quelle est la version de IE ?
• Quel est le résultat sur ce navigateur ?
• ...

[Tobear91]

Alors oui désolé, il s'agit de IE 7, le problème est le suivant. Je possède 2 puces, lorsque mon menu n'est pas déroulé la flèche est vert la droite et lorsqu'il est déroulé la flèche est vers le bas.

Sous FF et Chrome la flèche change bien d'apparence en fonction de la class que lui attribue le jQuery.

En revanche sous IE la flèche reste vers la droite. J'ai remarqué quelque chose, pour tester j'ai caché la première puce et lorsque je clique sur mon menu, la puce (vers le bas) apparaît bien. Il semblerais que la première puce ne veuille pas "s'effacer".

bug.png

Voilà, merci et bonne journée

[Tobear91]

Il s'avère qu'avec les différents menu accordéons que je test lorsque le menu est déroulé et donc actif, le css n'est pas pris en compte pour le changement !

[Bisûnûrs]

Y a pas de raison .. A mon avis c'est un problème Javascript et non CSS.

Peux-tu nous montrer la partie de ton code Javascript qui ajoute la classe en question ?

[Tobear91]

J'utilise JQuery donc je ne pense pas que ça provienne du code. Car en plus de ça j'ai beau utiliser différents accordéons j'ai toujours le même soucis

[ornitho13]

ce serait pas mal d'avoir un lien vers une démo.

De plus cela peut provenir de ton javascript, ce n'est parce que tu utilises jQuery qu'il ne peut pas y avoir d'erreur

[Tobear91]

Ca se présente sous cette forme la

HTML :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
<div id="accordion">
 
	<h2 class="current">First pane</h2>
	<div class="pane" style="display:block">... pane content ...</div>
 
	<h2>Second pane</h2>
	<div class="pane">... pane content ...</div>
 
	<h2>Third pane</h2>
	<div class="pane">... pane content ...</div>
 
</div>

Javascript :

Code :

$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});

CSS :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/* root element for accordion. decorated with rounded borders and gradient background image */
#accordion {
	margin-bottom: 30px;
}
 
/* accordion header */
#accordion h2 {
	padding: 4px 0 0 20px;
	height: 16px;
	background: url(../images/offres/Puce1_2.png) no-repeat;
	font-size: 12px;
	font-weight: normal;
	cursor: pointer;
	color: #047;
}
 
#accordion h2:hover {
	text-decoration: underline;
}
 
/* currently active header */
#accordion h2.current {
	cursor: default;
	background-image: url(../images/offres/Puce2_2.png);
}
 
/* accordion pane */
#accordion .pane {
	display: none;
	padding: 5px 0 5px 15px;
	font-size: 12px;
}
 
#accordion .pane li {
	list-style-image: url(../images/offres/puce3.png);
}

Dans le #accordion h2.current un background-color fonctionne alors qu'un background simlpe avec une url ne fonctionne pas