Basic, mais je bloque !

Par Alex, il y a 11 ans

Javascript

Bonjour,
Actuellement à l'apprentissage du JS je bloque sur un truc simple "pour vous" j'imagine:

$(function(){ $(document).on('click',"#sousmenu", function(){ $(this).find("#souscontenu").toggleClass('hide'); $(this).find("#souscontenu").toggleClass('show'); $(this).find("#icon").toggleClass("ion-chevron-down"); $(this).find("#icon").toggleClass("ion-chevron-up"); }) $(document).on('click',"#account", function(){ $(this).find("#menutop").toggleClass('hide'); $(this).find("#menutop").toggleClass('show'); $(this).find("#icon").toggleClass("ion-chevron-down"); $(this).find("#icon").toggleClass("ion-chevron-up"); }) })

Cette chose doit faire apparaître et disparaitre 2 menus.
Ces 2 menus les voilà:

<div class="account" id="account"> <img src="img/compte.png" alt="Compte"/> <i class="ion-chevron-down" id="icon"></i> </div> <div class="menutop hide" id="menutop"> <a href=""><i class="ion-gear-b"></i> Premier lien</a> <a href=""><i class="ion-person"></i> Deuxieme lien</a> </div>

Ici, rien n'est affiché lorsque je clic dessus

Alors que ce menu:

<div class="sousmenu" id="sousmenu"> <a href=""><i class="ion-person"></i>Utilisateurs<i class="ion-chevron-down" id="icon"></i></a> <div class="souscontenu hide" id="souscontenu"> <a href="">1er Bidule</a> <a href="">2eme Bidule</a> </div> </div>

Lui s'affiche et disparait instantatenement !

Aidez-moi, merci !

(PS: La class hide ne fait que un display: none; et show un display block)

9 réponses

antho07, il y a 11 ans

Bonjour il existe déjà en jquery les méthode show et hide qui font ton traitement... pas besoin de jouer avec les classes :)

Alex, il y a 11 ans

Et donc c'est quoi cette méthode?

Alex, il y a 11 ans

Oui, d'accord mais cela doit savoir si c'est ouvert ou pas le menu, et si il l'est alors le fermer?

Alex, il y a 11 ans

Le menu du compte marche, mais pas celui du sousmenu:l

$(this).find("#souscontenu").toggleClass('hide'); $( "#souscontenu" ).slideToggle( "slow", function() { }); $(this).find("#icon").toggleClass("ion-chevron-down"); $(this).find("#icon").toggleClass("ion-chevron-up");

Ce code étant similaire à celui utilisé pour l'autre menu....

Yentia, il y a 11 ans

Salut,

une autre solution que je t'apporte c'est de tester si ton menu a une class
par exemple

pour afficher : if($( "monmenu" ).hasClass( "show" )) { $( "monmenu" ).show(); } ou pour cacher if($( "monmenu" ).hasClass( "hide" )) { $( "monmenu" ).hide(); }

et sur le click tu peux ajouter ou supprimer une class

$("monmenu").click(function(){ $("monmenu2").removeClass('hide'); $("monmenu2").addClass('show'); });

c'est une autre solution , c'est juste un exemple, j'ai pas testé, mais tu peux l'adapter et jouer avec les class comme sa.

Alex, il y a 11 ans

Tes deux solutions ne marchent points.

antho07, il y a 11 ans

Ton code est similaire mais ta structure Html ne l'est pas