[Résolu] Menu dépliant, slideToggle fait du yoyo^^

Bonjour à tous,


Je travaille actuellement à la refonte du site de ma compagne, dont vous pouvez voir le chantier ici.

SI vous consultez cette page, vous remarquerez que par moments, le clic sur le bloc texte en bas ('.content-footer') qui permet de déplier/replier celui-ci via un slideToggle, provoque parfois des effets de "yoyo" !

Cela fait plusieurs jours que je suis dessus, et j'ai le sentiment que c'est la fonction slideToggle en elle-même qui pose problème... Mais malgré mes nombreuses tentatives, pas moyen de corriger cela

Voici donc mon bout de code, en espérant qu'il en inspirera certains... Merci donc par avance aux âmes charitables pour leur aide !

// FOLDING sur le bloc d'une page single
var contentfooterFolding = function() {
	$('.content-footer').each(function() {
		var contentHeight = $(this).parent('#content').height();
		var thisHeight = $(this).height();

		// On réduit le panneau par défaut quand la hauteur d'écran est trop réduite
		if( contentHeight <= thisHeight*2 ) {
			$(this).not('.folded').addClass('folded').find('.description').slideToggle('fast');
		}
		// Comportement
		$(this).on('click', '.foldTrigger', function() {
			$(this).closest('.content-footer').toggleClass('folded').find('.description').slideToggle('fast');
		});
	});
};

$(document).ready(function(){
	// FOLDING sur le bloc d'une page single
	contentfooterFolding();

	// ON RESIZE
	$(window).resize(function() {
		contentfooterFolding();
	});
});

Bonjour,

En fait c'est à cause de cette instruction précisément :

$(window).resize(function() {
    contentfooterFolding();
});

A chaque fois que la fenêtre est redimensionnée tu attache un évènement de click au bouton "agrandir/réduire" de ton footer, ce qui fait qu'il y a des rebonds.

Quelque chose qui fonctionne :

var footerResizing = function() {
    $('.content-footer').each(function() {
        // Ici j'ai juste sorti les variables (je trouve ça assez lisible comme ça)
        // mais ce n'est pas du tout obligé.
        // le slide toggle n'est pas nécessaire, tu veux juste fermer le panneau
        // et le .not('folded') non plus du coup
        if( $(this).parent().height() <= $(this).height()*2 ) {
            $(this).addClass('folded').find('.description').slideUp('fast');
        }
    });
};

// document ready
$(function(){
    // ici l'évènement de clic s'initialise une seule fois, au chargement de la page
    // => pas besoin de déléguer l'évènement ($('.footer-content').on('click', '.foldTrigger')...
    // car l'élément '.foldTrigger' n'est pas ajouté dynamiquement
    $('.foldTrigger').click(function() {
        $(this).closest('.content-footer').toggleClass('folded').find('.description')
            .slideToggle('fast');
    });

    // tu peux donner directement une référence à la fonction footerResizing
    // au $(window).resize, pas besoin de créer une fonction supplémentaire
    $(window).resize(footerResizing);
});

Modifié par Freez (28 Mar 2015 - 09:28)

Bonjour,


C'est super ! Apparemment, ta solution a bien résolu mon problème, merci énormément

Ca m'apprendra à être fainéant, il s'agissait donc "simplement" de scinder ma fonction pour ne pas rappeler mon événement click au moment du resize... Je dois avouer que je n'y aurais pas pensé, à celle-là (étant autodidacte et de petit niveau JS...). Merci encore, sujet résolu !