Comment fermer un DropDown ? en JS

Par JMERISE, il y a 11 ans


Bonjour / Bon-soir,

Voila j'ai un petit souci en voulant créer un dropdown (Je pance que sa s'appelle comme sa.), J'ai trouver sur le google comment le faire mais le seule prôbléme c'est que quand je reclique le petit menu ne ce ferme pas.

Aperçu du dropdown : http://gyazo.com/faa5a2ffa7ebab46580a11ca928bbb17

code HTML & JS : http://gyazo.com/1b7a66cb9b43d3496411aec11293f209

Code css ou cas ou : http://gyazo.com/860741da43c7e86e17d8cae3fd4cd9b4

Merci d'avance pour vas futur réponce.

13 réponses

StarTechs, il y a 11 ans

Salut ! Si tu veux utiliser la méthode toggle de Jqeury uniquement pour ton dropdown, ne charge pas jquery. JavaScript permet de le faire en natif :

element.classList.toggle("class");
betaWeb, il y a 11 ans

Salut,

Je ne vois pas trop où est le soucis, d'autant plus qu'un dropdown est extrêmement facile à réaliser en JS avec la librairie jQuery.

Après, pour ton soucis, tu ne passes à aucun moment la variable _hidediv à ta fonction showdiv(). De plus, _hidediv n'est modifiée nulle part, si bien que quoi qu'il arrive sa valeur sera null. Donc ton menu ne pourra pas se replier.

Defy, il y a 11 ans

Ha, je ne connaissai pas, merci pour l'information earhater :-)

Defy, il y a 11 ans

Avec jquery il suffit d'utiliser la method .toggle() et ca marche tous seul pour ce que tu veut faire. Tu peut paramétrer tous ca avec des fadeOut fadeIn etc etc
va voir ici

betaWeb, il y a 11 ans

Exactement @Defy ! Et j'ajouterais que tu peux utiliser la fonction slideToggle() (http://api.jquery.com/slidetoggle/) pour avoir un effet "déroulant" plus sympathique.

StarTechs, il y a 11 ans

Tient si tu veux de la lecture à ce sujet ;) Je te conseille d'importer un shiv, c'est très léger à ça t'assurera la compatiblité IE 8 et 9. (il y a les liens dans l'article).
http://www.alsacreations.com/article/lire/1498-lapi-classlist.html

A partir de là tu peux utiliser des transitions CSS plutot que d'utiliser Jquery. Il est lourd et les animations JS sont moins fluides, je m'en passe totalement dans tous mes projets maintenant :)

StarTechs, il y a 11 ans

N'hésite pas à passer ton sujet en résolu si tu as ce qu'il te faut ;)

JMERISE, il y a 11 ans

dsl sa pas marcher

Defy, il y a 11 ans

c'est quoi qui ne marche pas? Le code doit etre adapté a ta situation hein pas placé comme ca a l'arrache

JMERISE, il y a 11 ans

mon code actuelle marche, le prôbléme c'est que quand je clique le menu ne veux pas ce fermée.

StarTechs, il y a 11 ans

Ce qui est complétement normal ... Remplace ta fonction par ceci :

function _hidediv() { var dp = div.style.display; if(dp == "block") div.style.display = "none"; else div.style.display = "block"; }
JMERISE, il y a 11 ans

dsl no marche mare de cherche pour un tous petit truc !

Defy, il y a 11 ans

Si tu compte faire quelque animations gérer de l'ajax ou utiliser tous simplement le JS prend Jquery, ce que tu met 10 ans a faire en JS pure, Jquery ca prend 2 ligne et ca fonctionne dessuite.

Sinon gère le en CSS3 plutot que d'avoir une action au click tu l'aura au hover.