jQuery nécessite 2 clicks sur fonction Toggle

Znojmo · 11 Octobre 2012

Bonjour,

J'essaie de faire un superbe menu-accordéon. Je suis très bien parti, il n'y a plus qu'un seul problème : je dois cliquer deux fois sur les "headers" (désolé pour l'anglicisme) pour que les sections s'ouvrent, le deuxième coup (le premier coup ça marche parfaitement). Quelqu'un a une idée du problème?

Je joins mon code. Il n'y a aucune image et le code jQuery est en lien sur le web, alors un seul copier-coller suffit à l'expérimenter!

<html>


<head>
<script src="[url="http://code.jquery.com/jquery-1.4.2.min.js%22></script>"]http://code.jquery.c...n.js"></script>[/url]
<script>

	$(document).ready(function(){


		$(".menu_head").toggle(

			function(){

//le problème des 2 clics est apparu quand j'ai ajouté les 2 lignes suivantes, qui servent à enrouler les sections inutilisées du menu
			$(".menu_head").find('span').html('+');
			$(this).siblings("div.menu_body").slideUp("slow");

			$(this).next().slideDown();
			$(this).find('span').html('-');
			},
			function(){
			$(this).next().slideUp();
			$(this).find('span').html('+');
			})
	});
</script>


<style>

#firstpane p span

	{padding:1px 9px 2px 9px; position:relative; float:right; font-weight:bold;}


body {
	margin: 10px auto;
	font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
	background-color: #6699CC;
}
#haut {
	border-top-right-radius: 20px;
	border-top-left-radius: 20px;
	border-right: 6px groove;
	border-left: 6px groove;
	border-top: 6px groove;
	border-color: #0052CC;
	padding: 5px;
	margin: 0px;
	background-color: #C2EBFF;
}
#bas {
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 20px;
	border-right: 6px groove;
	border-left: 6px groove;
	border-bottom: 6px groove;
	border-color: #0052CC;
	padding: 5px;
	margin: 0px;
	background-color: #C2EBFF;
	background-size:0px 0px;
}
.menu_list {	
	width: 150px;
}
.menu_head {
	border-right: 6px groove;
	border-left: 6px groove;
	border-color: #0052CC;
	color:#336680;
	padding: 8px;
	cursor: pointer;
	position: relative;
	margin:0px;
	font-weight:bold;
	background-color: #C2EBFF;
}
.menu_body {
	display:none;
	border-right: 6px groove;
	border-left: 6px groove;
	border-color: #006699;
}
.menu_body a{
	display:block;
	color:#66ccff;
	background-color:#194775;
	padding-left:10px;
	font-weight:bold;
	text-decoration:none;
}
.menu_body a:hover{
	display:block;
	color:#A3E0FF;
	background-color:#4D7094;
	padding-left:10px;
	font-weight:bold;
	text-decoration:none;
}
</style>
</head>



<body>

<div style="float:left" >
<div id="firstpane" class="menu_list">
		<p id="haut"></p>
		<p class="menu_head">Header-1<span>+</span></p>
		<div class="menu_body">
	 <a href="#">Link-1</a>
		 <a href="#">Link-2</a>
		 <a href="#">Link-3</a>	
		</div>
		<p class="menu_head">Header-2<span>+</span></p>
		<div class="menu_body">
	 <a href="#">Link-1</a>
		 <a href="#">Link-2</a>
		 <a href="#">Link-3</a>	
		</div>
		<p class="menu_head">Header-3<span>+</span></p>
		<div class="menu_body">
		 <a href="#">Link-1</a>
		 <a href="#">Link-2</a>
		 <a href="#">Link-3</a>			
		</div>
		<p id="bas"></p>
</div>
</div>

</body>



</html>

Merci de tout coeur pour votre attention!

SStephane · 11 Octobre 2012

Ca m'a tout l'air un peu pourri toggle, essaie juste ça, ça devrait fonctionner :

(au premier click l'événement n'est pas levé, d'où l'adjectif "pourri" pour illustrer mon propos, je ne peux t'expliquer pourquoi, j'en sais rien, je connais pas toggle )


	 $(document).ready(function(){

			 $(".menu_head").bind({

					 click: function(){
					 $(".menu_head").find('span').html('+');
					 $(this).siblings("div.menu_body").slideUp("slow");
					 $(this).next().slideDown();
					 $(this).find('span').html('-');
					 }
})});

**Ernestine** · 11 Octobre 2012

Ce qui se passe est tout à fait normal : toggle est fait pour gérer un cycle de deux clics (ou plus) sur un même élément.

Si tu cliques sur le header 1, ça déclenche la première fonction : ouverture du header 1 et fermeture de tous les autres headers (qui sont déjà fermés au début).

Tu cliques ensuite sur le header 2 : ça déclenche à nouveau la première fonction (puisque c'est le premier clic sur cet élément) : ouverture du header 2 et fermeture de tous les autres (et donc notamment du header 1)

Tu recliques sur le header 1 : ça déclenche la deuxième fonction (puisque c'est le deuxième clic sur cet élément) : fermeture de l'élément ( qui est déjà fermé donc rien ne se passe visuellement)

Tu re-re-cliques sur le header 1 et là il s'ouvre.

Bref, toggle n'est pas adapté à ce que tu veux faire.

Connexion

jQuery nécessite 2 clicks sur fonction Toggle

Sujets conseillés

Znojmo

SStephane

Ernestine

Veuillez vous connecter pour commenter

Parcourir

Activité