Znojmo Posté 11 Octobre 2012 Partager Posté 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! Lien vers le commentaire Partager sur d’autres sites More sharing options...
SStephane Posté 11 Octobre 2012 Partager Posté 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('-'); }})}); Lien vers le commentaire Partager sur d’autres sites More sharing options...
Ernestine Posté 11 Octobre 2012 Partager Posté 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. Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant