18008 sujets

Questions générales et questions de débutants

Menu accordéon + Base de données

Pages :
(reprise du message précédent)

Essaye en ne donnant qu'une seuls classe a tous tes menus et tous tes sous-menus

Et d'enlever la ligne $(this).addClass("laclasse")
Modifié par Naemesis (22 May 2012 - 11:18)
Je te met le code au complet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	  <link rel="stylesheet" href="style/navigation.css" type="text/css" />
	 <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>   
	 <script type="text/javascript">	
	 $("li.toggleSubMenu").each(function() {
	        if($(this).children().length==1){
	            $(this).removeClass();
	            //$(this).addClass("laclasse");
	        }
	        });
	// cache les sous-menus
        // sauf celui qui porte la classe "open_at_load" :
        $("ul.subMenu:not('.open_at_load')").hide();
        // On selectionne tous les items de liste portant la classe "toggleSubMenu"
    
        // et on remplace l'element span qu'ils contiennent par un lien :
        $("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'evenement "click" sur les liens dans les items de liste
        // qui portent la classe "toggleSubMenu" :
        $("li.toggleSubMenu > a").click( function () {
            // Si le sous-menu etait deja ouvert, on le referme :
            if ($(this).next("ul.subMenu:visible").length != 0) {
                $(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
            }
            // Si le sous-menu est cache, on ferme les autres et on l'affiche :
            else {
                $("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
                //$("ul.subMenu2").slideUp("normal", function () { $(this).parent().removeClass("open") } );
                $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
            }
            
            // On empêche le navigateur de suivre le lien :
 				return false;
		});
		
     } ) ;
</script> 
</head>
<body>
<?php 
include('connect_db.php');
?>
 <ul class='navigation'>
 <?php 

 
 			$sqlmenuprinc = "SELECT *
							 FROM contenu
							 WHERE statut_contenu=1
 							 AND id_categorie=1";
			$resmenuprinc = $connexion->query($sqlmenuprinc);
			$resmenuprinc->setFetchMode(PDO::FETCH_OBJ);
			
			while($menuprinc=$resmenuprinc->fetch()){
				$elemenu=$menuprinc->description;
				$idelem=$menuprinc->id;
				
				/**if($idelem==4 || $idelem== 7 || $idelem==8 || $idelem==9)
				{
					echo "<li><a href='redirection.php?page=$idelem'> $elemenu </a></li>";
				}
				else
				{*/
				echo "<li style='position: static;' class='toggleSubMenu'><a href='redirection.php?page=$idelem'> $elemenu </a>";
				echo "<ul style='display: none;' class='subMenu'>";
				
				$sqlmenusec=  "SELECT *
				FROM contenu
				WHERE id_categorie=5 
				AND id_parent=$idelem   
 				AND statut_contenu=1";
 				$resmenusec = $connexion->query($sqlmenusec);
				$resmenusec->setFetchMode(PDO::FETCH_OBJ);
				
					while($menusec=$resmenusec->fetch()){
						$elemenu1=$menusec->description;
						$idelem1=$menusec->id;
						$idparent=$menusec->id_parent;
						/*if($idparent==6)
						{
							echo "<li><a href='redirection.php?page=$idelem1'> $elemenu1 </a></li>";
						}
						else
						{*/
						echo"<li style='position: static;' class='toggleSubMenu'><a href='redirection.php?page=$idelem1'> $elemenu1 </a>";
						echo"<ul style='display: none;' class='subMenu'>";
						
					    $sqlsousmenu=  "SELECT *
				   		FROM contenu
				   		WHERE id_categorie=2
				 		AND id_parent=$idelem1 
				   		AND statut_contenu=1";
					  	
					    $ressousmenu = $connexion->query($sqlsousmenu);
					    $ressousmenu->setFetchMode(PDO::FETCH_OBJ);

					    while($sousmenu=$ressousmenu->fetch()){
							$elemenu2=$sousmenu->description;
							$idelem2=$sousmenu->id;
							
							echo "<li><a href='produits.php?page=$idelem2'> $elemenu2 </a></li>";
						}
					    
						echo "</ul>";
						echo"</li>";
						}
					/*}*/
				echo "</ul>";
				echo"</li>";
				}
				
				/*}*/
				
			
				
				
					
			
		
			

?>
</ul>
</body>
</html>
Et bien, enfait, j'ai mes menus principaux qui affichent la page demandée quand on clique dessus, mais ne déroulent pas de sous menus quand il y en a.
Fonctionne chez moi avec uniquement des menus ayant pour classe toggleSubMenu et des sous-menus ayant pour classe SubMenu : 
$(document).ready(function() {  
     $("li.toggleSubMenu").each(function() {
            if($(this).children().length==1){
                $(this).removeClass();
            }
            });
    // cache les sous-menus
        // sauf celui qui porte la classe "open_at_load" :
        $("ul.subMenu:not('.open_at_load')").hide();
        // On selectionne tous les items de liste portant la classe "toggleSubMenu"
    
        // et on remplace l''element span qu''ils contiennent par un lien :
        $("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''evenement "click" sur les liens dans les items de liste
        // qui portent la classe "toggleSubMenu" :
        $("li.toggleSubMenu > a").click( function () {
            // Si le sous-menu etait deja ouvert, on le referme :
            if ($(this).next("ul.subMenu:visible").length != 0) {
                $(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
            }
            // Si le sous-menu est cache, on ferme les autres et on l''affiche :
            else {
                $("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
                $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
            }
            
            // On empêche le navigateur de suivre le lien :
                 return false;
        });
        
     } ) ;

Modifié par Naemesis (22 May 2012 - 13:45)
J'ai ça aussi, mais ça ne fonctionne pas, je vais tester sur un autre navigateur, pour voir si c'est pas un bug bizarre comme on en trouve parfois ...
Chez moi ca fonctionne parfaitement sous firefox.

Si tu testes avec ca : 


    <ul>
        <li style='position: static;' class='toggleSubMenu'><a href='é'> $elemenu1 </a>
            <ul style='display: none;' class='subMenu'>
                <li>a</li>
                <li>b</li> 
                <li>c</li>
            </ul>
        </li>
        <li style='position: static;' class='toggleSubMenu'><a href='&'> $elemenu1 </a></li>
        <li style='position: static;' class='toggleSubMenu'><a href='é'> $elemenu1 </a>
            <ul style='display: none;' class='subMenu'>
                <li>a</li>
                <li>b</li>
                <li>c</li>
            </ul>
        </li>
        <li style='position: static;' class='toggleSubMenu'><a href='&'> $elemenu1 </a></li>
    </ul>
bonjour

@naemesis , en se basant sur le selecteur :has , ça ne serait pas mieux ?

C'est mon approche d'amateur et c'est peut-être une bêtise. 

$("li:has(ul) a").click(function() { /* gestions des class et fonctions */ return false;});


cordialement,
GC
Tiens effectivement, j'y ai pas pensé, j'étais a fond dans mon .children().

Toutefois, cela ne change rien au fait que ca fonctionne comme ca chez moi et que ca devrait également fonctionner ailleurs.
ça a peut-être a voir avec le html source de la page envoyé au navigateur. Une erreur de syntaxe ou le script lancé avant l’événement onLoad ?
C'est pour ca que je veux voir si avec le dernier script html que j'ai envoyé ca fonctionne, pour moi ca vient surement du PHP qui ne renvoie pas les chose correctement.

@BenMalia : Il y a un endroit ou on peut voir ce que ca donne ?
@naemesis

Ah mais comme tu as fais, cela fonctionne très bien c'est sûr comme tu définis un lien pour chaque menu, j'avais ça avant, mais là avec la bbd j'ai deux while imbriqués qui affichent les sous-menus et les sous sous menus une seule fois selon les requêtes SQL.
Non je ne peux pas le mettre en ligne, je suis en local dans ma boite, cependant je vais essayer l'autre solution proposée.
Et si tu mets un lien pour chaque menu ca doit fonctionner aussi du coup, même si ce lien est vide ou que ce lien c'est #.
Oui ça fonctionne, mais le truc c'est que j'ai besoin que cela se fasse automatiquement car j'ai besoin qu'après dans la partie administration de mon CMS, l'administrateur puisseajouter ou encore modifier un menu, et s'il le fait il faudrait modifier et rajouter une ligne dans le code, donc ça ne vas pas.
Il y a moyen de modifier ton code dynamiquement, tu mets quelque chose si dans ta table le lien est vide et tu le détecte à la sortie puis tu modifies le lien.
Les liens ne sont pas contenus dans la table, il y a un lien pour chaque qui contient une redirection de page selon l'id récupéré en tout j'affiche trois liens contenus dans des while dans mon code, sauf que j'aimerais choisir de les activer ou pas selon qu'il y ait un sous-menu ou pas.

Menu:

echo "<li style='position: static;' class='toggleSubMenu'><a href='redirection.php?page=$idelem'> $elemenu </a>";
echo "<ul style='display: none;' class='subMenu'>";


Sous-Menu :

echo"<li style='position: static;' class='toggleSubMenu2'><a href='redirection.php?page=$idelem1'> $elemenu1 </a>";
echo"<ul style='display: none;' class='subMenu2'>"


Sous-Sous-Menu:

echo "<li><a href='produits.php?page=$idelem2'> $elemenu2 </a></li>";
$("li.toggleSubMenu, li.toggleSubMenu2").each(function(){
if($(this).has("ul"))
    $(this).next("a").onclick(function() {return false});
else
    //reste du développement et retractation des menus
});

Modifié par Naemesis (22 May 2012 - 15:49)
Pages :
Sujet clos
Aller à