Menu JQuery: effet inactif après clic sur un lien

Bonjour à tous,

Je vous fais part d'un petit souci probablement tout bête mais je boucle depuis quelques heures dessus sans résultats:

J'ai suivi le tutoriel d'Alsacréations pour créer un menu déroulant avec effet de slideUp/slideDown et l'effet fonctionne excepté lorsque je clique sur un lien de premier niveau de mon menu. Si c'est le cas le document se recharge et la nouvelle page apparaît avec le menu complétement visible.

Voici un extrait de mon code:

Le javascript:

$(document).ready(function(){
    // On cache les sous-menus
    $("#menu ul li ul").hide(); 

	$("#menu ul li > a").click(function(){ 
		// Si le sous-menu était déjà ouvert, on le ferme
		if ($(this).next("ul:visible").length != 0){
			$(this).next("ul").slideUp("normal");
		}
		// Si le sous-menu est caché, on ferme les autres et on l'affiche
		else { 
			$("#menu ul li ul").slideUp("normal");
			$(this).next("ul").slideDown("normal");
		}
	});
});

Et mon XHTML:

<div id="menu">
<ul>
	<li><a href="index.php"><span>Index</span></a></li>
	<li><a><span>Lien A</span></a>
		<ul>
			<li><a href="href_lienA1">Lien A1</a></li>
			<li><a href="href_lienA2">Lien A2</a></li>
			<li><a href="href_lienA3">Lien A3</a></li>
		</ul>
	</li>
	<li><a><span>Lien B</span></a>
		<ul>
			<li><a href="href_lienB1">Lien B1</a></li>
			<li><a href="href_lienB2">Lien B2</a></li>
			<li><a href="href_lienB3">Lien B3</a></li>
		</ul>

	</li>
	<li><a href="href_lienC"><span>Lien C</span></a></li>	
</ul>
</div>

Mon problème intervient lorsque je clique sur le Lien C, le navigateur suit alors href_lienC mais lors de l'affichage de cette nouvelle page les sous menus sont tous apparents comme si $(document).ready n'était pas appelé.

Quelqu'un peut-il m'éclairer là-dessus?

Merci beaucoup pour votre aide,

Chicken

ajoute simplement

return false;

après l'accolade de fermeture de ton else. Cela empechera le navigateur de suivre le lien.

Ensuite je vérifierais bien la présence du script ou de jQuery sur la page C

Merci pour ton aide Nukleo

return false;

... ne change rien (le lien est quand même suivi)

J'ai bien vérifié le script est bien présent sur la page C

Étrange...

Je viens de tester en local, et ça marche sans problème, les menus sont bien masqués, et le lien C est ignoré (via le return false; ).

Peut-être que tu appelles jQuery après tes instructions javascript ? Sinon, un lien vers une démo s'impose pour que l'on puisse voir l'erreur.

J'ai testé à nouveau et maintenant ça fonctionne.
Mis à part relancer Apache et Mysql je n'ai rien touché d'autre...

Merci pour ton aide ZEB

EDIT: le problème avec le return false; c'est que plus aucun lien n'est cliquable au sein de mon menu, comment résoudre ce petit désagrément?
Modifié par chicken94 (19 Apr 2011 - 21:35)

Ben le souci dans le code suivant, c'est que tu cibles toutes les premières séries de <a> de toutes les listes :

$("#menu ul li > a").click(function(){
// instructions
}

Donc déjà pour ne cibler que les listes de premier niveau, il faut faire ça (je pense) :

$("#menu > ul li > a").click(function(){
// instructions
}

Mais ton premier lien (qui renvoie vers l'index.php) reste inactif. Donc le plus simple est encore de rajouter une classe sur les items de liste que tu souhaites dérouler, et du coup ça donnerait ça:

$("#menu li.submenu > a").click(function(){
// instructions
}

et dans l'html :

<div id="menu"> 
<ul> 
    <li><a href="index.php"><span>Index</span></a></li> 
    <li class='submenu'><a><span>Lien A</span></a> 
        <ul> 
            <li><a href="href_lienA1">Lien A1</a></li> 
            <li><a href="href_lienA2">Lien A2</a></li> 
            <li><a href="href_lienA3">Lien A3</a></li> 
        </ul> 
    </li> 
    <li class='submenu'><a><span>Lien B</span></a> 
        <ul> 
            <li><a href="href_lienB1">Lien B1</a></li> 
            <li><a href="href_lienB2">Lien B2</a></li> 
            <li><a href="href_lienB3">Lien B3</a></li> 
        </ul> 
 
    </li> 
    <li><a href="href_lienC"><span>Lien C</span></a></li>     
</ul> 
</div>

Modifié par ZeB_panam (19 Apr 2011 - 22:05)

Yes avec la classe submenu le problème est résolu ! super !
Par contre maintenant que les liens sont suivis, chaque nouvelle page se charge avec les menus déroulés. Un peu comme si mon script n'était pas exécuté à chaque appel à index.php

Pour que vous compreniez mieux, le fonctionnement du site est le suivant: chaque lien envoi vers une url réécrite qui fait appel à la page index.php avec plein de paramètres. Index.php fait ensuite appel à des méthodes de mise en page pour le header, le content, etc. Le header est pourtant bien appelé à chaque fois et c'est lui qui contient la déclaration de JQUERY et du script. D'où ma perplexité

Bonjour,

comment construis tu ton menu? Au chargement de la page ou bien en JS quand la page est déjà chargée?

Bonjour silentauben,

Je le construis au chargement de la page pas en JS (le JS ne me sert qu'à réagir aux événements sur ma page), tu penses que le soucis viendrait de là?

ton utilisation de hide() semble bonne, à moins d'une incompatibilité avec le navigateur ( teste un autre, au cas ou), donc je présume que ton ready() se lance avant ton menu, sinon il agirait sur ton menu.

sinon utilise le slipeUp à la place du hide().

utilise aussi un alert("test") dans ton ready(), tu pourras voir s'il se lance quand la page est chargée.

je suis vraiment débutant dans le dev, alors excuse moi d'avance pour mon manque de précision

Merci pour le tuyau silentauben

En effet si je place un alert() dans mon ready, il ne se déclenche que lors du premier chargement de mon site (page d'accueil): dès que je clique sur un lien du menu, l'url suivit affiche une page qui ne passe jamais dans le ready... décidément

peux tu me dire comment tu appelles ta fonction javascript?

Je ne l'appelle pas, on doit y entrer automatiquement quand le DOM de la page passe dans l'état "ready", enfin si j'ai bien compris le fonctionnement de JQuery ^^

oui c'est sur mais il faut quand même le charger quand tu charges ton document.

soit en inserant le code directement dans ta page entre des balises <script></script> ou en l'appelant avec le chemin du fichier js.

dans ton cas, j'ai l'impression que l'appel de ton javascript ne se fait que la première fois, et je voudrais donc savoir comment tu l'appelles.

Je mets ceci (généré en php):

<script type=\"text/javascript\" src=\"jquery-1.5.2.js\"></script> 
<script type=\"text/javascript\" src=\"script.js\"></script>

est ce que tu peux me mettre le code PHP qui génère ton code javascript et l'appel de ton code PHP aussi en passant

Bien sûr !

voici un extrait de mon code PHP qui génère le javascript:

class MiseEnPage{

public static function display_header($meta_title,$site_index){
	echo "<!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\">
<head>
<meta http-equiv=\"content-Type\" content=\"text/html; charset=utf-8\" />
<script type=\"text/javascript\" src=\"jquery-1.5.2.js\"></script> 
<script type=\"text/javascript\" src=\"script.js\"></script>

display_header étant appelée en PHP dans index.php de la façon suivante:

MiseEnPage::display_header($meta_title, $site_index);

J'ai pourtant bien retracé les liens dans mon code et je ne vois pas ce qui cloche...
Quelqu'un a une idée?

est ce que tu as un lien ou voir ton menu en action?

Malheureusement non il est en local uniquement