11486 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Utiliser AddClass et RemoveClass en cliquant sur un lien

Bonjour
je voudrais faire apparaitre un submenu en cliquant sur un lien a. Mais surtout, je voudrais ensuite que ce submenu disparaisse quand je re-clique sur ce même lien.

J'arrive à faire apparaitre, mais pas disparaitre. Surement une petite erreur de logique dans mon javascript, dont je ne suis pas expert...

voila mon code pour mon lien :

<a href="#" data-submenu="submenu">La Gamme</span>


et celui pour l'apparition de mon div, qui est plus loin dans le code, et que j'active en ajoutant la class "open" à mon div dont la class contient déjà "submenu" , et que je désactive donc en supprimant cette class "open" ensuite :

        <div class="container-fluid submenu hidden-sm hidden-xs">
            <div class="row">
                <div class="container">
                    <div class="submenu-wrapper">
                        <ul class="submenu-items">
                            <li>
                                <a href="/la-gamme/filtre/">Filtre</a>
                            </li>
                            <li>
                                <a href="/la-gamme/autres/">Autres</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>




<script>
$(document).ready(function(){
    /* Open Remove Class JP */
    $('a[data-submenu="submenu"]').click(function(){
        $("div.submenu open").removeClass("open");
    });    
    
    /* Open Add Class JP */
    $('a[data-submenu="submenu"]').click(function(){
        $("div.submenu").addClass("open");
    });    
});
</script>


j'aimerai que le premier clic fasse apparaitre, mais que le 2e fasse disparaitre... en gros j'ajoute "open" la premiere fois, je le supprime si je clique et qu'i y est déjà...

merci de votre aide
Modérateur
Salut,

Ici quand tu cliques sur ton lien ça déclenche les deux fonctions tu es d'accord ?
Donc ça enlève et rajoute la classe à chaque fois.

En gros il ne faudrait qu'une fonction de click et à l'intérieur tu fais un if hasClass('open') (ou un truc du genre hein j'ai pas regardé la doc). Si il a la class, tu l’enlève, si il ne l'a pas tu l'ajoute.
il me semblait que c'est ce que j'avais fait justement...*

Dans le cas de la suppression, mon sélecteur est la div qui est définie par la class "submenu" et "open" ou dis autrement "submenu open" (peut etre que cette façon de l'écrire est incorrecte ?)

$("div.submenu open").removeClass("open");


Dans le cas de l'ajout, mon sélecteur est la div qui est définie par la class "submenu" seulement.

$("div.submenu").addClass("open");


et là ça marche...
donc au final ça ne déclenche pas 2 fois l'action il me semble, non ?
Modérateur
jp.bond a écrit :
il me semblait que c'est ce que j'avais fait justement...


Effectivement je n'avais pas fait attention au open dans ton sélecteur.

par contre...

jp.bond a écrit :
peut etre que cette façon de l'écrire est incorrecte ?)


Oui. Il faut l'écrire comme tu écrirais un selecteur CSS. Donc "div.submenu open" sélectionne la balise <open> fille d'une <div class="submenu">. Ici ce que tu cherche c'est plutot :

$("div.submenu.open")


Mais ce que je te disais reste valide. Même si le remove class ne se déclenche pas, le code a quand meme réagi deux fois au même click.

Tu peux même simplifier grâce au toggleClass 

$(document).ready(function(){
    /* Open Remove Class JP */
    $('a[data-submenu="submenu"]').click(function(){
        $('div.submenu').toggleClass('open');
    });    
});
ok j'ai trouvé... c'est la fonction toggleClass qu'il faut utiliser dans ce cas :


<script>
$(document).ready(function(){
    /* Open toggleClass JP */
    $('a[data-submenu="submenu"]').click(function(){
        $("div.submenu").toggleClass("open");
    });    
});
</script>
Sujet clos
Aller à