Besoin d'aide pour modifier css d'un menu via js

Version imprimable

Bonjour,

je suis nouveau ici, et débute completement dans le js.

Voici mon problème : j'ai un menu "extensible" (fonction trouvé sur un forum) sur mon site et j'aimerais que le titre du menu actif soit en noir s'il est ouvert.
j'ai bien essayé de modifier les propriétés css du .menu-title avec :ACTIVE . ce genre de chose mais cela ne fonctionne pas. J'ai demandé de l'aide à quelqu'un qui m'a dit que je devais modifier la prorpiété css via du js.

ca ne doit pas etre bien compliqué mais je suis perdu..

voici le code de la fonction expendiblemenu
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 $(document).ready(function() { // First we hide all exhibitis $("#menu ul li.section-title").nextAll().hide(); // then the active exhibit is showed $("#menu ul").each(function() { $(this).find("li.active").prevAll().nextAll().show(); }); // This is the toggle function // first it hides all sections $("#menu ul li.section-title").click(function() { $("#menu ul li.section-title").nextAll().hide(); $(this).nextAll().slideToggle("fast"); }); });
j'ai essayé de demander de l'aide à l'auteur du code mais sans succès..

(jQuery JavaScript Library v1.4.2)

D'avance merci pour le coup de main !

Alex.

18/08/2010, 15h47
SpaceFrog

Code:

$(this).nextAll().slideToggle("fast",function(){$(this).css({'color':'black'});
19/08/2010, 10h22
axorama

Merci pour cette réponse super rapide !

Mais cela ne fonctionne pas.. Le menu reste ouvert entièrement, autrement dit la fonction ne fonctionne plus lorsque je remplace la ligne.

Peut être est ce juste un problème de syntaxe ? ( ; } )
19/08/2010, 10h43
SpaceFrog

Code:

$(this).nextAll().slideToggle("fast",function(){$(this).css({'color':'black'});});
19/08/2010, 11h38
axorama

Merci ! le menu refonctionne bien mais ne change pas de couleur :roll:
19/08/2010, 12h34
SpaceFrog

on peut voir le html de $("#menu ul li.section-title")
le style color black devrait pourtant s'appliquer au li

Déso mais je ne comprend pas quel code tu veux voir

J'utilise un cms (indexhibit)

voici le code de la page générée

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
41
42
43
44
45
46
47
48
49
50
51
52
53
div id='menu'>
<div class='container'>
<p><rb/></p>
<ul>
<li class='section-title'>EDITORIAL</li>
<li><a href='http://alwaysflightfirst.webege.com/index.php?/projects/portfolio-1/' onclick="do_click();">Portfolio 1</a></li>
 
<li><a href='http://alwaysflightfirst.webege.com/index.php?/projects/portfolio-2/' onclick="do_click();">Portfolio 2</a></li>
<li><a href='http://alwaysflightfirst.webege.com/index.php?/projects/portfolio-11/' onclick="do_click();">Portfolio 3</a></li>
<li><a href='http://alwaysflightfirst.webege.com/index.php?/projects/porfolio-3/' onclick="do_click();">Portfolio 4</a></li>
<li><a href='http://alwaysflightfirst.webege.com/index.php?/projects/portfolio-5/2/' onclick="do_click();">Portfolio 5</a></li>
<li><a href='http://alwaysflightfirst.webege.com/index.php?/projects/portfolio-5/' onclick="do_click();">Portfolio 6</a></li>
<li><a href='http://alwaysflightfirst.webege.com/index.php?/projects/porfolio-6/' onclick="do_click();">Portfolio 7</a></li>
<li><a href='http://alwaysflightfirst.webege.com/index.php?/projects/portfolio-7/' onclick="do_click();">Portfolio 8</a></li>
<li><a href='http://alwaysflightfirst.webege.com/index.php?/projects/portfolio-8/' onclick="do_click();">Portfolio 9</a></li>
<li><a href='http://alwaysflightfirst.webege.com/index.php?/projects/portfolio-9/2/' onclick="do_click();">Portfolio 10</a></li>
 
<li><a href='http://alwaysflightfirst.webege.com/index.php?/projects/portfolio-10/' onclick="do_click();">Portfolio 11</a></li>
<li><a href='http://alwaysflightfirst.webege.com/index.php?/projects/portfolio-13/' onclick="do_click();">Portfolio 12</a></li>
<li><a href='http://alwaysflightfirst.webege.com/index.php?/projects/portfolio-14/' onclick="do_click();">Portfolio 13</a></li>
<li><a href='http://alwaysflightfirst.webege.com/index.php?/projects/portfolio-15/' onclick="do_click();">Portfolio 14</a></li>
</ul>
 
<ul>
<li class='section-title'>STILL LIFE</li>
<li><a href='http://alwaysflightfirst.webege.com/index.php?/stilllife/portfolio-1/' onclick="do_click();">portfolio 1</a></li>
<li><a href='http://alwaysflightfirst.webege.com/index.php?/stilllife/portfolio-2/' onclick="do_click();">portfolio 2</a></li>
 
<li><a href='http://alwaysflightfirst.webege.com/index.php?/stilllife/portfolio-3/' onclick="do_click();">portfolio 3</a></li>
<li><a href='http://alwaysflightfirst.webege.com/index.php?/stilllife/portfolio-4/' onclick="do_click();">portfolio 4</a></li>
</ul>
 
<ul>
<li class='section-title'>CELEBRITIES</li>
<li><a href='http://alwaysflightfirst.webege.com/index.php?/celeb-portraits/christina-aguillera/' onclick="do_click();">Christina Aguillera</a></li>
<li><a href='http://alwaysflightfirst.webege.com/index.php?/celeb-portraits/glamour-france/' onclick="do_click();">Glamour France</a></li>
<li><a href='http://alwaysflightfirst.webege.com/index.php?/celeb-portraits/emmanelle-seigner/' onclick="do_click();">Emmanelle seigner</a></li>
<li><a href='http://alwaysflightfirst.webege.com/index.php?/celeb-portraits/julie-depardieu/' onclick="do_click();">Julie Depardieu</a></li>
 
<li><a href='http://alwaysflightfirst.webege.com/index.php?/celeb-portraits/nora-arnezeder/' onclick="do_click();">Nora Arnezeder</a></li>
<li><a href='http://alwaysflightfirst.webege.com/index.php?/celeb-portraits/sylvie-testud/' onclick="do_click();">Sylvie Testud</a></li>
<li><a href='http://alwaysflightfirst.webege.com/index.php?/celeb-portraits/lea-seydoux/' onclick="do_click();">Léa Seydoux</a></li>
<li><a href='http://alwaysflightfirst.webege.com/index.php?/celeb-portraits/lolita-chammah/' onclick="do_click();">Lolita Chammah</a></li>
<li><a href='http://alwaysflightfirst.webege.com/index.php?/celeb-portraits/emilie-dequenne/' onclick="do_click();">Emilie Dequenne</a></li>
<li><a href='http://alwaysflightfirst.webege.com/index.php?/celeb-portraits/mathilde-seigner/' onclick="do_click();">Mathilde Seigner</a></li>
<li><a href='http://alwaysflightfirst.webege.com/index.php?/celeb-portraits/virgina-effira/' onclick="do_click();">Virgina Efira</a></li>
<li><a href='http://alwaysflightfirst.webege.com/index.php?/celeb-portraits/zoe-felix/' onclick="do_click();">Zoe Felix</a></li>
</ul>
 
<ul>
<li><a href='http://alwaysflightfirst.webege.com/index.php?/client-list/' onclick="do_click();"><h3>CLIENTS</h3></a></li>
<li><a href='http://alwaysflightfirst.webege.com/index.php?/contact/' onclick="do_click();"><h3>CONTACT</h3></a></li>
</ul>

19/08/2010, 15h21
SpaceFrog

Code:

$(this).nextAll().slideToggle("fast",function(){$(this).children('a').css({'text-decoration':enone','color':'black'});});
19/08/2010, 15h33
axorama

Ce qui se passe avec ce code : le contenu dépliable du menu devient noir , mais pas le titre. en quand on clique sur un élément du menu tout redevient gris mais sauf la page actuelle

http://alwaysflightfirst.webege.com/home.php

merci encore pour ton aide
19/08/2010, 15h50
SpaceFrog

Code:

$(this).nextAll().slideToggle("fast",function(){$(this).nextAll().css({'text-decoration':enone','color':'black'});});
19/08/2010, 16h14
axorama
Ce code ne change rien par contre si je met :
Code:

1 2 $(this).nextAll().slideToggle("fast"); $(this).css({'color':'black'});
Cela fonctionne mais partiellement : lorsque je déplie un menu , le titre devient bien noir, mais lorsque j'en déplie un autre il reste noir. Je suppose que je dois mettre quelquechose du genre

Code:

$("#menu ul li.section-title").nextAll().css({'color':'#ACB3B9'});

Quelquepart mais ou ??

un autre probleme c'est que lorsque je clique et qu'il charge la page demandée , le titre redevient gris .

en fait le souci vient de fait que this pointe sur le premier li et que le toggle est applique sur le next all
Code:

1 2 3 4 5 6 7 $("#menu ul li.section-title").click(function() { $("#menu ul li.section-title").nextAll().hide(); $("#menu ul li.section-title").css({'color':'#ACB3B9'}); $(this).css({'color':'black'}); $(this).nextAll().slideToggle("fast"); });

20/08/2010, 10h21
axorama

Super ça fonctionne !

Merci bcp !

La seule chose c'est que je voudrais que le titre du menu reste en noir lorsque la page demandée se charge. Comment procéder ? aussi en js ?

J'imagine qu'il faut introduire cette ligne quelque part mais ou ?

Code:

$("#menu ul li.section-title").css({'color':'black'})

J'ai fait quelques essais mais sans succès ..

Voici le code actuel

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
 
$(document).ready(function()
{
// First we hide all exhibitis 
$("#menu ul li.section-title").nextAll().hide();
 
// then the active exhibit is showed
$("#menu ul").each(function()
{
$(this).find("li.active").prevAll().nextAll().show();
//$("#menu ul li.section-title").css({'color':'black'});
$(this).find("li.active .section-title").css({'color':'black'});
});
 
// This is the toggle function
// first it hides all sections
$("#menu ul li.section-title").click(function()
{
$("#menu ul li.section-title").nextAll().hide();
$("#menu ul li.section-title").css({'color':'#ACB3B9'});
$(this).css({'color':'black'});
$(this).nextAll().slideToggle("fast");
});
 
 
 
});

31/08/2010, 15h48
axorama

On m'a aidé à trouver la solution :

Code:

$(this).find("li.active").parent().find('li.section-title').css({'color':'black'});