[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

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 ?

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>

ah mince, nos messages se sont croisés !
merci pour ton aide en tout cas !