Afficher les sous-menus par clic

Version imprimable

Bonjour,

J'ai un problème avec un menu et ses sous-menus.

Je désire quand on clique sur un menu, les sous-menus s'affichent, mais je ne sais pas pourquoi, cela n'affiche que les sous-menu du premier menu.

Voilà le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$responses=mysql_query("select * from categorie");
		$comt=1;
		while($donner=mysql_fetch_array($responses))
 
		{?>
    <ul > 
 <li ><a onclick="javascript: showmenu(document.getElementById('sousmenu'));"  
    href="#"><?php echo $donner['nomcategorie']; ?></a>
      <?php
         
         $respons=mysql_query("select *from souscategorie where idcaetgorie=".$donner['idcategorie']);?>
        <ul id="sousmenu" style="display:none">
		<?php while($donne=mysql_fetch_array($respons)) {?>
            <li id="sousmen"><a href="#"><?php echo $donne['nomsoucategorie'] ?></a>       </li>
         <?php  }; ?>    
        </ul> 
      </li>  
 
    </ul>
	<?php }; ?> 
      <p>

Merci de votre aide !

14/11/2010, 13h08
Bovino

Normal...
getElementById (comme son nom l'indique fort bien) récupère l'élément dont l'id est passé en paramètre.
Sachant qu'un id doit être unique dans la page, seul le premier élément est retourné.
14/11/2010, 16h06
younes86

bonjour
alors c est quoi la solution ça fait 3 jour que j ai ce problème je trouve pas une solution
14/11/2010, 16h18
Bovino

Et bien de rendre les id uniques...
Par exemple en rajoutant des indices au niveau de la boucle.
14/11/2010, 19h05
younes86

oui je l a fait mais ça marche pas je mettait un champs de base de donne dans l id mais ça marche pas

Essaye avec ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
        $responses=mysql_query("select * from categorie");
        $cpt=1;
        while($donner=mysql_fetch_array($responses))
        {
?>
	<ul> 
	<li><a onclick="javascript:showmenu(document.getElementById('sousmenu<?=$cpt?>'));" href="#"><?php echo $donner['nomcategorie']; ?></a>
	<?php
        $respons=mysql_query("select *from souscategorie where idcaetgorie=".$donner['idcategorie']);?>
	<ul id="sousmenu<?=$cpt?>" style="display:none;">
	<?php while($donne=mysql_fetch_array($respons)) {?>
		<li id="sousmen"><a href="#"><?php echo $donne['nomsoucategorie'] ?></a></li>
	<?php }; ?>
	</ul>
	</li>
	</ul>
<?php } ?>

oui j ai fait la même chose mais ça marche pas j ai fait une autre méthode
j ai rempli les sous menus manuellement je fais ce code de methode
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 function masquer(sousmenu) { tab= new Array(2) ; tab[0]='sous1' ; tab[1]='sous2' ; tab[2]='sous3' ; for( i=0 ; i<=2 ; i++) { if (tab[i]==sousmenu) { obj=document.getElementById(sousmenu); obj.style.display="block" ; } else { obj=document.getElementById(sousmenu); obj.style.display="none" ; } } }
j ai appel la méthode mais toujours ça marche pas
premier appel :

Code:

masquer('sous1') ;

deuxième apple :

Code:

onclick="javascript :masquer('sous1');"

:roll::roll::roll::roll:

Essaye ça :

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
<?php
        $cpt=1;
        while($cpt<5)
        {
        ?>
	<ul> 
		<li>
			<a onclick="javascript:showmenu(document.getElementById('sousmenu<?=$cpt?>'));" href="#">Menu <?php echo $cpt; ?></a>
			<ul id="sousmenu<?=$cpt?>" style="display:none;">
			<?php for($j=0;$j<4;$j++) {?>
				<li id="sousmen"><a href="#">Sous-menu <?php echo $cpt.".".$j; ?></a></li>
			<?php 
                                
                        }
                        ?>
			</ul>
		</li>
	</ul>
	<?php 
                $cpt++;
        } 
?>
<script type="text/javascript">
	function showmenu(IdSsMenu){
		for( i=1 ; i<<?=$cpt?> ; i++)
		{ 
			if ("sousmenu"+i == IdSsMenu)
				document.getElementById("sousmenu"+i).style.display="block" ;
			else
				document.getElementById("sousmenu"+i).style.display="none" ;
		}
	}
</script>

bonjour
je suis perdu :cry:
le code ça marche pas
voila le code que j ai ecrit

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
   <div id="menu3">
     <?php  mysql_connect("localhost","root","");
		mysql_select_db("cour");
		$responses=mysql_query("select * from categorie");
		?> <ul> <?php 
                $cpt=1;
                while($donner=mysql_fetch_array($responses))
                {?>
 
<li><a onclick="javascript:showmenu(document.getElementById('sousmenu<?=$cpt?>'));" href="#" ><?php echo $donner['nomcategorie'].$cpt; ?></a>
<?php $respons=mysql_query("select * from souscategorie where idcaetgorie=".$donner['idcategorie']); ?>
        <ul id="sousmenu<?=$cpt?>" style="display:none;">
		<?php while($donne=mysql_fetch_array($respons)) 
                {?>
            <li><a href="#"><?php echo $donne['nomsoucategorie']; ?></a></li>
         <?php  }; ?>    
        </ul> 
      </li>  
  <?php $cpt++ ; }; ?>      
    </ul>
<script type="text/javascript">
function showmenu(IdSsMenu){
		for( i=1 ; i<<?=$cpt?> ; i++)
		{ 
			if ("sousmenu"+i == IdSsMenu){
				document.getElementById("sousmenu"+i).style.display="block" ;}
			else{
				document.getElementById("sousmenu"+i).style.display="none" ;}
		}
	}
</script>
      </div>

toujours même problème les sous menu s affichent pas
merci pour votre aide

18/11/2010, 06h27
andry.aime

Bonjour,

Montre nous le code HTML généré mais pas le PHP.

A+.

j utilise jquery ça marche bien avec jquery menu
mais le seul problème que j ai quand j ai clique sur un lien de sous menu i
il se ferme tous les sous menu de menu ouvert je veux quand je clique sur un sous menu les sous menus restent ouvert :(
voila le code java script:

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
	  <ul class="navigation"> 
	  <?php while($donner=mysql_fetch_array($responses))
                {?>
    <li class="toggleSubMenu"><span><a href="http://localhost/sitebookdowland/donne.php?cat=<?php echo $donner['idcategorie'] ;?>"> <?php echo $donner['nomcategorie']; ?> </a></span>
	<?php $respons=mysql_query("select * from souscategorie where idcaetgorie=".$donner['idcategorie']); ?>
        <ul class="subMenu"> 
		<?php while($donne=mysql_fetch_array($respons)) 
                {?>
            <li><a href="http://localhost/sitebookdowland/donne.php?scat=<?php echo $donne['idsoucategorie'] ;?>"  title=""><?php echo $donne['nomsoucategorie']; ?></a></li> 
			<?php }?>
        </ul> 
 
    </li> 
	<?php }?>
</ul>
          <script type="text/javascript"> 
<!-- 
$(document).ready( function () { 
    // On cache les sous-menus : 
    $(".navigation ul.subMenu").hide(); 
    // On sélectionne tous les items de liste portant la classe "toggleSubMenu" 
 
    // et on remplace l'élément span qu'ils contiennent par un lien : 
    $(".navigation li.toggleSubMenu span").each( function () { 
        // On stocke le contenu du span : 
        var TexteSpan = $(this).text(); 
        $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ; 
    } ) ; 
 
    // On modifie l'évènement "click" sur les liens dans les items de liste 
    // qui portent la classe "toggleSubMenu" : 
    $(".navigation li.toggleSubMenu > a").click( function () { 
        // Si le sous-menu était déjà ouvert, on le referme : 
        if ($(this).next("ul.subMenu:visible").length != 0) { 
            $(this).next("ul.subMenu").slideUp("normal"); 
        } 
        // Si le sous-menu est caché, on ferme les autres et on l'affiche : 
        else { 
		$(".navigation ul.subMenu").slideUp("normal"); 
            $(this).next("ul.subMenu").slideDown("normal"); 
        } 
        // On empêche le navigateur de suivre le lien : 
        return false; 
    }); 
    $(".navigation li.subMenu> a").click( function () { 
        // Si le sous-menu était déjà ouvert, on le referme : 
        if ($(this).next("ul.subMenu:visible").length != 0) { 
$(this).next("li.subMenu:visible").length != 0   ;     } 
 
    });     
 
 
 
} ) ; 
// --></script>