Discussion :

[Harlock999]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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'});
});
});