Basic, mais je bloque !

Alex
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

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
Auteur

Et donc c'est quoi cette méthode?

antho07

bah .. doc ==> http://api.jquery.com/show/

Alex
Auteur

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

antho07

==>http://api.jquery.com/slidetoggle/

Alex
Auteur

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

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
Auteur

Tes deux solutions ne marchent points.

antho07

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