Discussion :

[dharkan]

bonjours à tous,

Je souhaiterais faire un menu en JQuery, lorsque je clique sur un sous-menu, sa me déroule le sous-sous-menu correspondant. c'est réaliser grace à ce code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
$('#deroule_$i').click(function()
	{
		if ($('#sous_menu_$i').is(':visible'))
		{							   $('#sous_menu_$i').slideUp('slow');		
		}
		else
		{
									$('#sous_menu_$i').slideDown('slow');
		}
		// $('#sous_menu_$i').filter(':visible').slideUp('slow');
		// $('#sous_menu_$i').filter(':hidden').slideDown('slow');
 
							});

Mais cela ne fait pas exactement ce que je veux. En effet, lorsque je clique sur un sous-menu, il me déroule son sous-sous-menu et quand je reclique dessus il se referme. Mais si je ne reclique pas dessus et que j'ouvre un autre sous-menu, le premier ouvert ne se referme pas.

mon menu se construit de cette manière comme sa vous verrez comment sa se construit :

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
 
<div id="menu">
 
<span id='menu_$j' class='gras'>".$ligne."</span><br/>
 
<span id='deroule_$l' class='gras sous_menu'>".$ligne."</span><br/>
 
<div id='sous_menu_$l' class='style gras sous_sous_menu'>
 
<ul class='non_puce'>
 
"<li>".$this->controller->versPage($pointeVers[$i],$ligne)."</li>"
........
</ul>
 
</div>
 
<span id='menu_$j' class='gras'>".$ligne."</span><br/>
 
<span id='deroule_$l' class='gras sous_menu'>".$ligne."</span><br/>
 
<div id='sous_menu_$l' class='style gras sous_sous_menu'>
 
<ul class='non_puce'>
 
"<li>".$this->controller->versPage($pointeVers[$i],$ligne)."</li>"
........
</ul>
 
</div>
 .......
 .......
</div>

[Bovino]

Code :

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

$('#deroule_$i')

Il n'y aurait pas un problème dans le nommage ?

[dharkan]

alors non il n'y a pas d'erreur le code JQuery que j ai mit est écrit avec PHP donc ici on voit les $i etc.

Sinon j ai trouvé un bricolage maison pour avoir ce que je veux voici le code sa peut servir :

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
 
$('#deroule_$i').click(function()
{
	//si le sous_menu_$i est visible				
	if ($('#sous_menu_$i').is(':visible'))
	{
                //on le remonte
		$('#sous_menu_$i').slideUp('slow');		
	}
        //sinon
	else
       {
                //on remonte tout les sous_menu
		$('.sous_menu').slideUp('slow');
                //on abaisse celui qu'on vient juste de cliquer
		$('#sous_menu_$i').slideDown('slow');
	}
 
	// $('#sous_menu_$i').filter(':visible').slideUp('slow');
        // $('#sous_menu_$i').filter(':hidden').slideDown('slow');
 
});

[SpaceFrog]

et là le $i est interprété entre simples quotes ???,

Code :

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

if ($('#sous_menu_$i').is(':visible'))

[dharkan]

oui le $i est bien interprété lorsqu'il est entre simple quote

EDIT : le code PHP n'a pas sa place ici mais je met le code complet de la procédure

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
 
for($i=0;$i<= $site->getMenu()->getNbTotal();$i++)
{					
	echo "
 
	$('#deroule_$i').click(function()
		{
 
			 if ($('#sous_menu_$i').is(':visible'))
			 {
				$('#sous_menu_$i').slideUp('slow');		
 
			}
			 else
			{
				$('.sous_sous_menu').slideUp('slow');
				$('#sous_menu_$i').slideDown('slow');
 
			}
 
		});	";				
	}

[SpaceFrog]

ha oui vu comme ça ...

après c'est une question de gouts, mais je trouve les syntaxes suivantes plus claires :

Code :

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

1
2
3
4
5
6
for($i=0;$i<= $site->getMenu()->getNbTotal();$i++)
{					
	echo '
 
	$("#deroule_'.$i.'").click(function()
		{

ou

Code :

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

1
2
3
4
for($i=0;$i<= $site->getMenu()->getNbTotal();$i++)
{					
	echo '$("#deroule_"',$i,'").click(function()
		{