11521 sujets

JavaScript, DOM et API Web HTML5

RemoveClass ne fonctionne pas

Yop la communauté !

Je suis en train de créer le menu d'un site ecommerce pour le mobile en jquery.
J'utilise slideToggle, et je précise que lorsque la menu est ':visible' j'y ajoute une class 'awesome_transform', et que lorsqu'il ne l'est pas je remove cette class.

L'addClass fonctionne bien, mais le removeClass ne se fait pas, je n'arrive réellement pas à trouver pourquoi.

Est ce qu'un l'un de vous pourrait m'éclairer de ses lumières svp Smiley smile

Voici le code pen : https://codepen.io/Guutak/pen/pPZgzV

PS: le menu s'affiche correctement à partir de 1023px
Modérateur
Salut,

Quand tu dis qu'il ne marche pas c'est que quand on reclick sur le menu déjà ouvert qu'il se referme et se ré-ouvre directement ? C'est le comportement que j'ai quand je regarde ton lien.
Yop,

Ce comportement là est normal en fait ^^
C'est quand tu click sur un autre menu, que le précédent se ferme, la class add devrait être remove à sa fermeture (quand il n'est plus ':visible'), mais elle reste bien présente
Salut,

Je crois que l’élément cliqué est toujours visible et donc tu n'entre jamais dans le else de ta condition. Une solution serait de remonter dans l’arborescence pour chercher toutes les classes à supprimer, puis d'ajouter ta classe à l'élément cliqué.
Modérateur
Ha ok je vois mieux. Bon j'ai du mal a comprendre tout le code comme ça mais le this fait reference à l'élément cliqué... donc le remove ne s'applique qu'a l'élément cliqué aussi non ? Alors que toit tu veux remove la classe sur un autre élément.

Et il y a un second soucis à mon avis avec le :visible il est toujours à true. Il ne passe jamais dans le else.
J'y ai pensé ! Mais j'ai du mal à concevoir la remontée de l'arborescence (je suis encore newbie en Jquery, et la conception ô joie ô bonheur).

Tu aurais un exemple stp ? Smiley confused
Tu trouveras ici l'api pour parcourir le DOM.
Et je te mets un exemple pour ton code. Donc je fais ce que j'avais écrit précédement.
- Je remonte le DOM pour sélectionner le header contenant les nav : .parentsUntil('#main')
- Je cherche toutes classes que je souhaite supprimer : .find('.awesome_transform')
$('a.responsive-menu').on('click', function(e){
				e.preventDefault();
				$('ul.menu').slideUp();
				$(this).next('ul.menu').slideToggle();
        $(this).parentsUntil('#main')
          .find('.awesome_transform')
          .removeClass('awesome_transform');
				$(this).find('.fa-angle-right').addClass('awesome_transform');
			});


Il risque d'y avoir un soucis avec le sous-menu, car tu y ajoute également cette même classe. A toi de voir comment adapter ton code.
Modifié par Oken (16 May 2017 - 12:51)
Ca ne fonctionne pas, il y a des erreurs de syntaxe apparemment sur le

.find('.awesome_transform')


Pourtant je crois que c'est la bonne façon de l'écrire d'après la doc :o
En fait j'ai trouvé !
Grace à ta réflexion Smiley smile

Je retire la class à tous les ul.menu AVANT de l'ajouter:

$(document).ready(function(){
			$('a.responsive-menu').on('click', function(e){
				e.preventDefault();
				$('ul.menu').slideUp();
				$('ul.menu').prev('.responsive-menu').find('.fa-angle-right').removeClass('awesome_transform');
				$(this).next('ul.menu').slideToggle({
					'start': function(){
						if($(this).is(':visible')){
							console.log(this);
							$(this).prev('.responsive-menu').find('.fa-angle-right').addClass('awesome_transform');
						}
					}
				});
			});


Encore merci pour l'aide ! Smiley smile
Modifié par Guutak (16 May 2017 - 14:24)
Meilleure solution
Sujet clos
Aller à