Pages :
Bonjour,
J'utilise le menu accordéon du tutoriel modifié pour pouvoir fonctionner avec une base de données, mais j'ai cependant un petit soucis que j'essaye de résoudre depuis quelques temps, en effet j'aimerais que les liens redirigent vers la page demandée quand ils n'ont pas de sous menus, au lieu d'essayer d'ouvrir un sous-menu.

Je vous copie mon code

	 <script type="text/javascript">
	$(document).ready( function () {
        // On 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;
        });
         $("li.toggleSubMenu2 > a").click( function () {
            // Si le sous-menu etait deja ouvert, on le referme :
            if ($(this).next("ul.subMenu2:visible").length != 0) {
                $(this).next("ul.subMenu2").slideUp("normal", function () { $(this).parent().removeClass("open") } );
            }
            // Si le sous-menu est cache, on ferme les autres et on l'affiche :
            else {
                $("ul.subMenu2").slideUp("normal", function () { $(this).parent().removeClass("open") } );
                $(this).next("ul.subMenu2").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 description, id, statut_contenu
							 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;
				
				
								
				echo "<li style='position: static;' class='toggleSubMenu'><a href='redirection.php?page=$idelem'> $elemenu </a>";
				echo "<ul style='display: none;' class='subMenu'>";
				
				$sqlmenusec=  "SELECT description, id, statut_contenu
				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;
						echo"<li style='position: static;' class='toggleSubMenu2'><a href='redirection.php?page=$idelem1'> $elemenu1 </a>";
						echo"<ul style='display: none;' class='subMenu2'>";
						
					    $sqlsousmenu=  "SELECT description, id, statut_contenu
				   		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='redirection.php?page=$idelem2'> $elemenu2 </a></li>";
						}
					    
						echo "</ul>";
						echo"</li>";
					}
				echo "</ul>";
				echo"</li>";
				}
			
				
				
					
			
		
			

?>
</ul>
</body>
</html> 


En vous remerciant d'avance si vous avez une idée Smiley smile
Et si tu mets des classes différentes aux menus qui ont des sous-menus et à ceux qui n'en ont pas dans ton PHP, ca te faciliterait pas la vie ?
C'est vrai que ce serait une bonne idée.
Mais ce que j'essaye de faire, c'est de ne pas empêcher le navigateur de suivre le lien quand il n'y a pas de sous menu directement dans le javascript.
Je pense qu'il faudrait tester où il y a "return false".
Et en utilisant le .children() de jquery ?

$(this).children()....
ton traitement

ou en faisant quelque chose avec :

$("li.toggleSubMenu").each().children().length // ramène le nombre d'enfants de chaque élément .toggleSubMenu
Je vais aussi essayer de regarder ca ce soir en rentrant, continue à alimenter le post si tu trouves quelque chose
J'ai essayé de toutes les façons possibles et imaginables, mais je pense finalement qu'il faut revenir dans le PHP pour les modif'.

En gros je choisis pour quels menus j'affiche le lien, et pour lesquels je continue d'afficher les sous menus.


if($idelem==4 || $idelem== 7 || $idelem==8 || $idelem==9)
{
    echo "<li><a href='redirection.php?page=$idelem'> $elemenu </a></li>";
}
else
{
  ...
}


de cette manière
Un truc de ce genre devrait passer je pense :
$("li.toggleSubMenu").each(function() {
if($(this).children().length==0){
    $(this).addClass("laclasse")
    $(this).removeClass("toggleSubMenu")
}
})

Je ne peux pas tester chez moi.
Modifié par Naemesis (21 May 2012 - 15:24)
J'ai testé sans grand succès, c'est quoi quand tu veux ajouter comme classe avant de supprimer "toggleSubMenu" ?
Peu importe, mais si tu mets ca avant ton script qui te fait le menu déroulant, seuls ceux ou il n'y a pas de sous-menu devrait changer de class et donc renvoyer vers un lien.
On a oublié la deuxième class de menus :
$("li.toggleSubMenu, li.toggleSubMenu2").each(function() {
if($(this).children().length==0){
    $(this).removeClass()
    $(this).addClass("laclasse")
}
})
Je l'avais déjà mise ^^
Rien n'y fait, ça essaye toujours d'ouvrir un sous menu quand on clique sur le menu voulu.
Après plusieurs tests, toujours rien, mais je pense qu'enfait, pour lui tout le monde à des "children" c'est pour ça que ça change tout ou rien quand on teste.
En théorie non, si la balise que tu prends comme référentiel n'en inclut pas d'autre elle n'a pas d'enfants.
En tout cas, ça se comporte comme si tout les éléments du menus avaient des sous menus car quoi qu'on fasse, on a à chaque fois le début d'animation pour ouvrir un sous menu inexistant.
$("li.toggleSubMenu, li.toggleSubMenu2").each(function() {
        if($(this).children().length==1){
            $(this).removeClass()
            $(this).addClass("laclasse")
        }
        })


Je viens de tester ca fonctionne, en fait le 0 ne marche pas ici car dans ton <li></li> tu as toujours un <a> donc toujours un enfant. Il fallait juste mettre un 1.
Je ne sais pas pourquoi, mais ça ne fonctionne pas de mon côté, ça n'ouvre plus aucun sous menu, et affiche les pages quand on clique sur le menu.
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)
Pages :