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

[xavioche77]

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 :

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 :

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]

tu affectes un id fixe dans une boucle php;

cherche l'erreur;

[xavioche77]

ok mais je remplace les deux identifiants par :

Code :

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

et

Code :

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]

Code :

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

[xavioche77]

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]

Code :

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

[xavioche77]

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 :

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 :

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]

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

[xavioche77]

oui,
autant que j'ai de sous menus

[SpaceFrog]

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 :

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

[xavioche77]

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 :

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 :

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

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

Comment fonctionne le

Code :

1
2
 
[id^='declencheur']

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

[SpaceFrog]

oui mais le this limitera au div en question

[xavioche77]

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

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

[SpaceFrog]

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

Code :

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 :

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]

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

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
<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]

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]

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 :

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>