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

**axorama** · 18/08/2010, 15h39

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 :

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

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.

**SpaceFrog** · 18/08/2010, 15h47

Code :

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

$(this).nextAll().slideToggle("fast",function(){$(this).css({'color':'black'});

**axorama** · 19/08/2010, 10h22

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 ? ( ; } )

**SpaceFrog** · 19/08/2010, 10h43

Code :

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

$(this).nextAll().slideToggle("fast",function(){$(this).css({'color':'black'});});

**axorama** · 19/08/2010, 11h38

Merci ! le menu refonctionne bien mais ne change pas de couleur

**SpaceFrog** · 19/08/2010, 12h34

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

**axorama** · 19/08/2010, 14h55

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 :

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

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>

**SpaceFrog** · 19/08/2010, 15h21

Code :

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

$(this).nextAll().slideToggle("fast",function(){$(this).children('a').css({'text-decoration':enone','color':'black'});});

**axorama** · 19/08/2010, 15h33

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

**SpaceFrog** · 19/08/2010, 15h50

Code :

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

$(this).nextAll().slideToggle("fast",function(){$(this).nextAll().css({'text-decoration':enone','color':'black'});});

**axorama** · 19/08/2010, 16h14

Ce code ne change rien par contre si je met :

Code :

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

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 :

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

$("#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 .

**SpaceFrog** · 19/08/2010, 16h36

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 :

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

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");
});

**axorama** · 20/08/2010, 10h21

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 ?

**axorama** · 30/08/2010, 10h14

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

Code :

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

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

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

Voici le code actuel

Code :

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

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");
});
 
 
 
});

**axorama** · 31/08/2010, 15h48

On m'a aidé à trouver la solution :

Code :

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

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

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

jQuery

Discussions similaires

Partager

Partager