Passer du mouseover au clic

Version imprimable

1 pièce(s) jointe(s)

Bonjour à tous,

Je reviens à la charge avec mon menu déroulant en javascript (et un peu de jQuery). Pour rappel, j'ai en haut des onglets qui font apparaître une div en dessous du menu. Grâce à jQuery, ces div se remplacent les unes les autres en glissant de façon fluide. Cf. capture ci-jointe pour plus de clarté.

Tout fonctionne comme je le souhaitais initialement, c'est-à-dire que les div se succèdent en se basant sur le passage de la souris. Mais le résultat est un peu trop "speed" et sera sans doute déroutant pour les internautes. Je souhaite donc conserver le même principe de fonctionnement, mais en utilisant le clic.

Un clic ouvrirait chaque div. Un nouveau clic (s'il a lieu) fermerait cette même div. Mais si la première div n'est pas refermée par un clic (ce qui devrait arriver le plus souvent), je voudrais obtenir la même animation qu'avec le mouseover actuel : que la nouvelle div remplace la précédente en "glissant dessus".

J'ai donc tenté d'adapter mon code javascript en remplaçant mouseover par click, en faisant appel à des tests (if…else), mais rien à faire ça ne tourne pas. Le meilleur résultat auquel je suis arrivé est que les div apparaissent les unes au-dessous des autres, sans refermer la précédente.

Mes notions de JS sont encore trop sommaires je le crains...
Une bonne âme pour me mettre sur la piste ?…

Mon code actuel (qui fonctionne en mouseover/mouseout) :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 $(document).ready(function() { $('.tabMenu > li:not(.blind, .lastblind)').mouseover(function(){ $(this).removeClass('close'); $(this).addClass('open'); $('.boxBody div:eq(' + $('.tabMenu > li').index(this) + ')').stop(true,true).slideDown({duration:900, easing:'easeOutQuad'}); }); $('.tabMenu > li:not(.blind, .lastblind)').mouseout(function() { $(this).removeClass('open'); $(this).addClass('close'); $('.boxBody div').stop(true,true).slideUp({duration:500, easing:'easeOutQuad'}); }); });

04/10/2012, 07h51
Bovino

Tu peux utiliser .toggle() par exemple pour gérer deux fonctions de rappels pour un même événement.

Merci Bovino.

Voici la façon dont j'ai modifié mon code.
Mais le résultat est le même que ce que j'avais avant : lorsque l'une des divs est ouverte, le clic sur un autre onglet ajoute la div correspondante en dessous de celle qui est ouverte, au lieu de la "remplacer" en glissant.

Une idée ?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 $(document).ready(function() { $('.tabMenu > li:not(.blind, .lastblind)').toggle(function(){ $('.boxBody div:eq(' + $('.tabMenu > li').index(this) + ')').stop(true,true).slideDown({duration:900, easing:'easeOutQuad'}); },function(){ $('.boxBody div').stop(true,true).slideUp({duration:500, easing:'easeOutQuad'}); }); });

Erratum :
Pour être plus juste, voici le code que j'utilise (j'avais oublié une partie) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
$(document).ready(function() {		   
 
$('.tabMenu > li:not(.blind, .lastblind)').toggle(function(){
	$(this).removeClass('close');
	$(this).addClass('open');
	$('.boxBody div:eq(' + $('.tabMenu > li').index(this) + ')').stop(true,true).slideDown({duration:900, easing:'easeOutQuad'});
 },function(){
   $(this).removeClass('open');
   $(this).addClass('close');
   $('.boxBody div').stop(true,true).slideUp({duration:500, easing:'easeOutQuad'});
 });
 
});

En fait, en utilisant le code ci-dessous, j'obtiens l'effet désiré, mais seulement une fois. C'est à dire que si je clique sur l'onglet 1, la div 1 s'ouvre. Si je clique sur l'onglet 2, la div 2 la remplace. C'est parfait.
Mais si je clique de nouveau sur l'onglet 1, il referme la div.
D'après ce que je comprends, c'est "normal", car l'onglet 1 répond à son second clic, c'est à dire la fonction 2 de son toggle.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 $(document).ready(function(){ $('.tabMenu > li:not(.blind, .lastblind)').toggle(function(){ $(this).removeClass('close'); $(this).addClass('open'); $('.boxBody div').stop(true,true).slideUp({duration:500, easing:'easeOutQuad'}); $('.boxBody div:eq(' + $('.tabMenu > li').index(this) + ')').stop(true,true).slideDown({duration:900, easing:'easeOutQuad'}); },function(){ $(this).removeClass('open'); $(this).addClass('close'); $('.boxBody div').stop(true,true).slideUp({duration:500, easing:'easeOutQuad'}); }); });

06/10/2012, 06h54
NoSmoking

Bonjour,
peut être n'as tu pas regardé
:fleche: Mise en place d'une navigation par onglets avec jQuery

Bonjour,

Est-ce que ceci pourrait fonctionner?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function() {
    $('.tabMenu > li:not(.blind, .lastblind)').click(function(){
        if ($(this).hasClass('close'))
        {
            $(this).removeClass('close');
            $(this).addClass('open');
            $('.boxBody div:eq(' + $('.tabMenu > li').index(this) + ')').stop(true,true).slideDown({duration:900, easing:'easeOutQuad'});
        }
        else
        {
            $(this).removeClass('open');
            $(this).addClass('close');
            $('.boxBody div').stop(true,true).slideUp({duration:500, easing:'easeOutQuad'});
        }
    });
});

Cordialement,
Mahefasoa