Afficher les sous-menus par clic

**younes86** · 13/11/2010, 03h39

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 :

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
$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 !

**Bovino** · 14/11/2010, 13h08

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é.

**younes86** · 14/11/2010, 16h06

bonjour
alors c est quoi la solution ça fait 3 jour que j ai ce problème je trouve pas une solution

**Bovino** · 14/11/2010, 16h18

Et bien de rendre les id uniques...
Par exemple en rajoutant des indices au niveau de la boucle.

**younes86** · 14/11/2010, 19h05

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

**scourjean** · 15/11/2010, 10h08

Essaye avec ceci :

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
<?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 } ?>

**younes86** · 17/11/2010, 02h47

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 :

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

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

 masquer('sous1') ;

deuxième apple :

Code :

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

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

**scourjean** · 17/11/2010, 10h17

Essaye ça :

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

**younes86** · 17/11/2010, 19h50

bonjour
je suis perdu

le code ça marche pas
voila le code que j ai ecrit

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

**andry.aime** · 18/11/2010, 06h27

Bonjour,

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

A+.

**younes86** · 24/11/2010, 19h28

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 :

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

Afficher les sous-menus par clic

JavaScript

Discussions similaires

Partager

Partager