11496 sujets

JavaScript, DOM et API Web HTML5

[Résolu] JQuery nécessite 2 clicks sur Toggle

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="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<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!
Ah oui?

Es-tu certain que tu as testé assez longtemps? Tu cliques, puis tu cliques sur un autre header, puis tu ré-essaies de cliquer sur le premier?

Chez moi ça ne marche ni avec Firefox ni avec Explorer, et j'ai les dernières versions...
Ça fait plusieurs mois et toujours pas de solution alors je me permets de re-poster...

Quelqu'un a une idée?
Ton problème viens du fait que tu utilise la fonction toggle, le toggle fonctionne par élément et n'est pas intelligente on dira ... De ce fait elle ne va pas enregistrer le fait qu'en ayant cliquer sur un autre élément tu as refermé celui d'avant ... alors quand tu reclique dessus cet ancien élément il va dans un premier fermer celui ci ( qui l'est donc deja ) et au prochain le rouvrir. d'ou le besoin du double click !!
Modifié par tazzkiller (21 Apr 2013 - 20:40)
Merci beaucoup tazzkiller, ça fait du sens!

Donc problème trouvé disons, je ne m'y connais pas beaucoup, et maintenant quelqu'un aurait une petite solution rapide, en me disant comment l'intégrer à mon code de préférence?
voila je t'ai crée un menu accordeon adapter a ton code tu as juste à remplacer le tiens par celui la :


$(document).ready(function(){
$("#firstpane").delegate('.menu_head', 'click', function(){
var el = $(this);
$('.menu_head').find('span').html('+');
if (!el.next('div').hasClass('open')){
$("div.menu_body").slideUp().removeClass('open');
el.find('span').html('-');
el.next("div.menu_body").slideDown("slow").addClass('open');
}
else {
$("div.menu_body").slideUp();
el.next("div.menu_body").removeClass('open');
}
});
});

Modifié par tazzkiller (22 Apr 2013 - 00:20)
De rien, d'ailleurs une petite ligne en trop trainait dans le code, je l'ai retiré du code mis juste avant ...
Modifié par tazzkiller (22 Apr 2013 - 00:22)
Sujet clos
Aller à