Comment faire pour modifier la propriété du CSS

Version imprimable

Bonjour à tous,

J'essaye de modifier le CSS sur un <li> mais évidemment je n'y arrive pas.

Voici le html
Code:

1 2 3 4 5 6 7 8 9 10 <ul class="ddmenu"> <li>1</li> <li>2 <ul style="display:none"> <li>2.1</li> <li>2.2</li> </ul> </li> </ul>
et voici le code jquery
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 37 38 39 40 // JavaScript Document var timeout = 9500; var closetimer = 0; var ddmenuitem = 0; function ddmenu_open(){ ddmenu_canceltimer(); ddmenu_close(); ddmenuitem = $(this).find('ul').css('display', 'block'); // ddmenuitem = $(this).find('ul').parent().css('background-image', 'none'); // ddmenuitem = $(this).find('ul').parent().css('background-color', '#eeeeee'); } function ddmenu_close(){ if(ddmenuitem){ ddmenuitem = ddmenuitem.css('display', 'none'); } } function ddmenu_timer(){ closetimer = window.setTimeout(ddmenu_close, timeout); } function ddmenu_canceltimer(){ if(closetimer){ window.clearTimeout(closetimer); closetimer = null; } } document.onclick = ddmenu_close; $(document).ready(function(){ $('.ddmenu > li').find('ul').css('display', 'none'); $('.ddmenu > li').bind('mouseover', ddmenu_open); $('.ddmenu > li').bind('mouseout', ddmenu_timer); });
Ceci fonctionne très bien.
Mais, par défault les <li> du premier niveau on une background-image.
Quand je passe la souris sur le li, le sous menu se développe très bien. Mais j'aimerais que l'image de fond soit remplacé par la couleur de fond background-color:#eee; et évidemment quand le timeout est échu, que l'image de fond revienne.

J'ai essayé de faire avec un parent(), comme vous le voyer en commentaire. Mas évidemment ca ne fonctionne pas.

Pourriez-vous m'aider la dessus?

Aussi, j'aimerais que le sous-menu de développe en douce. Il y a une fonction comme toogle? ou slideDown(slow)?
Malheureusement je n'y ai aussi pas réussi, mais je vais encore regarder, mais si vous pouviez me mettre sur la piste ca serait cool.

Merci

15/04/2012, 19h05
elfamine
en CSS normalement ca devrait faire l'affaire...
Code:

1 2 3 4 5 6 .ddmenu{ background-image:url('bg.png');} .ddmenu li ul{ background-image:none!important; background-color:#eee;
edit:j'ai rien dit je crois que tu cherche .stop().animate({"background-image": "img.png"}, "slow");
15/04/2012, 19h13
pierrot10

Heu, ben c'est en jQuery que je veux changer les propriétés du CSS... :D
Pas directement dans le fichier .css

selon la docu ici : http://api.jquery.com/animate/ à moins d'utiliser le plugin jQuery.Color() tu ne pourra pas manipuler background-color
j'ai essayé avec fontSize pour le fun:aie:

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
<html>
<head>
<style media="screen" type="text/css">@import url("center.css");</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.submenu').hide();
 	$('.xmenu').hover(
		function(){	$('.submenu',this).slideDown();
					 $('.submenu li',this).animate({fontSize: "3em"}, "slow");
				},
		function(){$('.submenu',this).slideUp();
		$('.submenu li',this).animate({fontSize: "1em"}, "slow")}
	); 
});
</script>
</head>
<body>
 
<ul class="ddmenu">
<li>1</li>
<li class="xmenu">2
<ul class="submenu">
<li>2.1</li>
<li>2.2</li>
</ul>
</li>
</ul>
</body>
</html>

15/04/2012, 20h40
pierrot10

Ben je viens juste de trouver avec

addClass() et removeClass() et ca marche bien. Du moins je l'espère, je suis en train de tester

Reste a voir comment faire le slide.

J'ai trouver

show( 'slide', 'down', 1000 )

Mais ca fonctionne bizarement.....