Aller au contenu

jQuery nécessite 2 clicks sur fonction Toggle


Znojmo

Sujets conseillés

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!

Lien vers le commentaire
Partager sur d’autres sites

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 smile.gif )


$(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('-');
}
})});

Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...