afficher les sous menus fils d'un menu père

**xavioche77** · 25/03/2011, 13h35

Bonjour, j'ai un problème qui me fait perdre la tête.
J'ai dans une base de données des menus ( père) et des sous menus (fils) associé a un menu père.

J'affiche la liste des menus pères avec des check box et je voudrais que quand on clique sur le menu père, une nouvelle liste avec tous les menus fils s'affichent.
J'y suis presque ( enfin je crois) mais quand on clique sur un menu père TOUS les menus fils s'ouvre pas seulement les sous menus associés à ce menu père.

code php

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
 
<table border="0" align="left" cellpadding="2" cellspacing="1" class="tableau">
<tr>
	<th align="center" nowrap>Catégories :</th>
	<?php
				$sql ="SELECT nom,page,id_eap FROM menu_eap WHERE menu = 1";
   sql_mysql_query($sql,"test");
 
 
 
echo '<ul id="menu_selection">';
 
while ($row1 = mysql_fetch_object($query_test)) {	
		echo '<tr>';
		echo '<td>';
 
		echo '<li id="declencheur">';
 
		echo '<input type="checkbox" name="menu[]" value='.$row1->page.'/>'.$row1->nom; 
		echo '</li>';
		echo '<ul>';
 
			$sql ="SELECT nom,page FROM menu_eap WHERE sous_menu = 1 and id_cat_pere='$row1->id_eap'";
			sql_mysql_query($sql,"test2");
			while ($row2 = mysql_fetch_object($query_test2)) {
			echo '<li id="monDiv">';
 
			echo '<input type="checkbox" name="menu[]" value='.$row2->page.'/>'.$row2->nom; 
 
			echo '</li>';
 
 
}
		echo '</td>';echo '</tr>';
 
	}

Code javasciprt :

Code :

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

1
2
3
4
5
6
 
jQuery(document).ready(function() {
$("li#declencheur").click(function() {
$("li#monDiv").toggle("fast");
});
});

Si vous pouviez m'aider? Je voudrais seulement que les sous menus associés au menu père s'affiche , pas tous.
Merco

**javatwister** · 25/03/2011, 13h38

tu affectes un id fixe dans une boucle php;

cherche l'erreur;

**xavioche77** · 25/03/2011, 14h06

ok mais je remplace les deux identifiants par :

Code :

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

echo '<li id="declencheur"'.$row1->id_eap.'>';

et

Code :

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

echo '<li id="monDiv"'.$row1->id_eap.'>';

Mais comment je fais pour que le JS comprenne que l'identifiant change??
Dsl, je ne connais pas grd chose au JS, mais je tente de me perfectionner !

**SpaceFrog** · 25/03/2011, 14h35

Code :

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

$("li[id^='declencheur']").click(function() {

**xavioche77** · 25/03/2011, 14h49

ben en ayant suivi vos conseils, ca me change pas le problème.

Qd je clique sur n'importe quel menu père, tous les menus fils s'ouvre en même temps :p:p:p:p

**SpaceFrog** · 25/03/2011, 14h59

Code :

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

1
2
3
4
5
jQuery(document).ready(function() {
$("li[id^='declencheur']").click(function() {
$(this).children('#monDiv").toggle("fast");
});
});

**xavioche77** · 25/03/2011, 15h11

ben là du coup, il ne se passe rien quand je clique. Tous les menus pères et fils sont déjà déroulé et le click n"a aucun effet.
En suivant vos modifications mon code est donc maintenant:

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
 
<th align="center" nowrap>Catégories :</th>
	<?php
				$sql ="SELECT nom,page,id_eap FROM menu_eap WHERE menu = 1";
   sql_mysql_query($sql,"test");
 
echo '<ul id="menu_selection">';
 
while ($row1 = mysql_fetch_object($query_test)) {	
		echo '<tr>';
		echo '<td>';
 
		echo '<li id="declencheur"'.$row1->id_eap.'>';
 
		echo '<input type="checkbox" name="menu[]" value='.$row1->id_eap.'/>'.$row1->nom; 
		echo '</li>';
		echo '<ul>';
 
			$sql ="SELECT nom,page,id_eap FROM menu_eap WHERE sous_menu = 1 and id_cat_pere='$row1->id_eap'";
			sql_mysql_query($sql,"test2");
			echo '<li id="monDiv">';
			while ($row2 = mysql_fetch_object($query_test2)) {
 
 
			echo '<input type="checkbox" name="menu[]" value='.$row2->id_eap.'/>'.$row2->nom; 
			echo '<br>';
 
 
}
		echo '</li>';	
		echo '</td>';echo '</tr>';

Javascript :

Code :

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

1
2
3
4
5
6
 
jQuery(document).ready(function() {
$("li[id^='declencheur']").click(function() {
$(this).children('#monDiv').toggle("fast");
});
});

Merci du temps que vous m'accordez

**SpaceFrog** · 25/03/2011, 15h48

heu le souci est le meme qu'au départ
tu as de multiples id #monDiv sur la page ?

**xavioche77** · 25/03/2011, 15h56

oui,
autant que j'ai de sous menus

**SpaceFrog** · 25/03/2011, 16h02

ben tu n'as pas retenu le leçon alors ...

UN ID DOIT ETRE UNIQUE SUR LA PAGE

donc même principe : incrementes tes id

et ton code devient

Code :

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

1
2
3
4
5
6
 
$(function() {
$("li[id^='declencheur']").click(function() {
$(this).children("[id^='monDiv']").toggle("fast");
});
});

**xavioche77** · 25/03/2011, 16h58

oui oui mais
On dirait que le JS n'est plus pris en compte. Les menus sont déroulé en sous menus et la souris ne produits plus aucun effet.

Code :

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

1
2
 
[id^='declencheur']

Ceci incrémente un id de 1 ??
donc declencheur1, declencheur2 apres ect..

ou ca signifie qu'il y aura un chiffre derrière quelqu'il soit ??
declencheur127 fonctionnera t'il?

Bon ok je me suis très mal exprimé, mais quand je fais ca :

Code :

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

echo '<li id="monDiv"'.$row2->id_eap.'>';

L'id eap n'est pas un chiffre qui se suit à chaque fois.

Comment fonctionne le

Code :

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

1
2
 
[id^='declencheur']

parce que ca doit etre ca qui ne marche pas ou alors je ne vois pas du tout

**SpaceFrog** · 25/03/2011, 17h08

oui mais le this limitera au div en question

**xavioche77** · 25/03/2011, 17h15

................................

Au risque de passer pour un mec qui comprend rien, j'ai relu 20 fois ta réponse sans en comprendre le sens.

**SpaceFrog** · 25/03/2011, 18h49

honte à moi ...
je n'avais pas relu 20 fois ton code ...
je viens de dénicher une horreur ...

Code :

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

1
2
3
4
5
6
7
echo '<ul id="menu_selection">';
 
while ($row1 = mysql_fetch_object($query_test)) {	
		echo '<tr>';
		echo '<td>';
 
		echo '<li id="declencheur">';

Ce qui si je ne m'abuse (comme le docteur du même nom) donne dans ton html:

Code :

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

1
2
3
4
5
6
 
 
<ul id="menu_slection">
<tr>
<td>
<li id="declencheur"

dis moi si je me fourvoie en me montrant le html généré ...

Mais si c'est le cas ... il faudrait peut être d'abord que ton code html soit correct, là il doit y avoir un croisement de balises pas très homologué ...
Tu ne peux pas mettre des balise tr et td au milieu de balises ul et li comme ça !!
Si tes balises sont mal balancées jquery ne sauvera pas l'affaire ...

**SpaceFrog** · 25/03/2011, 19h01

pour ce qui est du this qui limite le toggle à l'element clické ...

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
<script type='text/javascript'>
$(function(){
 
$("ul[id^='pere']").click(function(){
 
	$(this).children("ul[id^='fils']").toggle('slow')
	})
})
 
	</script>
</head>
<body>
<ul id="pere1">pere 1
 <ul id="fils1_1">
 	<li>un 1</li>
 	<li>un 1</li>
 	<li>un 1</li>
 	<li>un 1</li>
 </ul> 	 	
 <ul id="fils2_1">
 	<li>deux 1</li>
 	<li>deux 1</li>
 	<li>deux 1</li>
 	<li>deux 1</li>
 </ul> 	 	
</ul>
 
<ul id="pere2">pere2
 <ul id="fils1_2">
 	<li>un 2</li>
 	<li>un 2</li>
 	<li>un 2</li>
 	<li>un 2</li>
 </ul> 	 	
 <ul id="fils2_2">
 	<li>deux 2</li>
 	<li>deux 2</li>
 	<li>deux 2</li>
 	<li>deux 2</li>
 </ul> 	 	
</ul>
</body>
</html></html>

ici quand tu cliques sur pere1 (this) l'animation ne s'applique qu'a ses enfant dont l'id commence par fils ...

**SpaceFrog** · 25/03/2011, 19h14

Au passage Daniel si tu me lis ce code présente deux dysfonctionnements sous IE :

1) à la réapparition les li enfants perdent leur puce ???

2) en fin de disparition il y a un clignotement ???

Tu as un idée de la cause ?

Biensur sous ffx pas de souci

**danielhagnoul** · 25/03/2011, 22h07

Bonsoir

En mettant un peu d'ordre dans l'anarchie des tags HTML et en respectant l'ordre des children

, je ne vois pas de soucis sous C10, F4 et IE9.

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
        img {border:none; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* TEST */
		ul {list-style:square; }
		#pere1, #pere2 {list-style:circle; }
		li {margin-left:18px; }
    </style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
		<ul id="pere1">
			<li>
				pere 1
				<ul id="fils1_1">
					<li>un 1</li>
					<li>un 1</li>
					<li>un 1</li>
					<li>un 1</li>
				</ul> 	 	
				<ul id="fils2_1">
					<li>deux 1</li>
					<li>deux 1</li>
					<li>deux 1</li>
					<li>deux 1</li>
				</ul>
			</li>
		</ul>
		<ul id="pere2">
			<li>
				pere 2
				<ul id="fils1_2">
					<li>un 2</li>
					<li>un 2</li>
					<li>un 2</li>
					<li>un 2</li>
				</ul> 	 	
				<ul id="fils2_2">
					<li>deux 2</li>
					<li>deux 2</li>
					<li>deux 2</li>
					<li>deux 2</li>
				</ul>
			</li>
		</ul>
 
	</section>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
    <script>
		$(function(){
			$("ul[id^='pere']").click(function(){
				$(this).children("li").children("ul[id^='fils']").toggle('slow')
			})
		});
    </script>
</body>  
</html>

afficher les sous menus fils d'un menu père

jQuery

Discussions similaires

Partager

Partager