JQuery : le menu fantôme

Le souci est que quand j'applique une classe (qui a pour fonction de mettre le sélecteur en position : fixed) à un menu (constitué d'une liste non ordonnée), le menu disparaît.

j'ai un document fait d'éléments que j'ai appelé panneaux. Plusieurs panneaux sur une ligne constituent une rangée, et il y a plusieurs rangées. Chacun des panneaux fait la largeur et la hauteur de la fenêtre. Des menus permettent donc d'accéder à des panneaux qui se trouvent en dehors de la fenêtre. J'ai un menu qui permet de naviguer verticalement, entre les premiers panneaux des rangées, qui fonctionne correctement, et sur chaque rangée, un menu qui me permet de naviguer horizontalement sur la rangée concernée.

L'idée est que lorsqu'on clique sur le menu vertical, il est positionné en fixe et que lorsqu'on clique sur un des menus horizontaux, le menu vertical est masqué et le menu horizontal est positionné en fixe. Quand on clique sur le premier élément du menu horizontal, ce menu redevient statique et le menu vertical est à nouveau affiché.

Dans la feuile de styles, j'ai défini une classe pour le positionnement fixe :

	.fixed_position{
		position: fixed;
	}

Le code html se présente grosso modo comme ça :

	<div class="row">

		<ul class="menu h_menu" >
			<li><a href="#panel11" class="firstlink">Panel 1-1</a></li>
			<li><a href="#panel12" class="notfirst">Panel 1-2</a></li>
			<li><a href="#panel13" class="notfirst">Panel 1-3</a></li>
		</ul>


		<div class="panel" id="panel11">
		<h2>Panel 1-1</h2>
		<p>Nulla placerat ... luctus odio.</p>
		</div>

		<div class="panel" id="panel12">
		<h2>Panel 1-2</h2>
		<p>Nulla placerat ... luctus odio.</p>
		</div>

		<div class="panel" id="panel13">
		<h2>Panel 1-3</h2>
		<p>Nulla placerat ... luctus odio.</p>
		</div>
	</div>


	<div class="row">

		<ul class="menu h_menu" >
			<li><a href="#panel21" class="firstlink">Panel 2-1</a></li>
			<li><a href="#panel22" class="notfirst">Panel 2-2</a></li>
			<li><a href="#panel23" class="notfirst">Panel 2-3</a></li>
		</ul>

		<div class="panel" id="panel21">
		<h2>Panel 2-1</h2>
		<p>Nulla ... luctus odio.</p>
		</div>

		...

		<div class="panel" id="panel23">
		<h2>Panel 2-3</h2>
		<p>Nulla placerat ... odio.</p>
		</div>
	</div>

Il y en a trois des div class=row. Au total, j'ai neuf panneaux.


Du coté de jQuery, voici :

		$(".v_menu li a, .firstlink").on("click",function(event){ 
			console.log("menu v ou menu h premier");
			event.preventDefault(); 
			$('.v_menu').show('4000') ;
			$('.h_menu').removeClass('fixed_position') ;
			scroll_mvt($(this).attr("href"));
		});



		$(".notfirst").on("click",function(event){ 
			console.log("menu h sauf le premier") ;
			event.preventDefault(); 
			$('.v_menu').hide() ;
			var leparent = $(this).parent().parent() ;
			leparent.addClass('fixed_position') ;
			console.log(
				"menu visible ? " + leparent.is(":visible") +	// true
				" - longueur objet : " + leparent.length + 	// 1
				" - css top : " + leparent.css('top')) ;	// panel33 : 1802px

			scroll_mvt($(this).attr("href"));
		});

La première fonction marche comme attendu. Elle sélectionne un lien qui appartient soit au menu vertical, soit est le premier élément d'un des menus horizontaux, et qui a levé un évènement click. Il affiche le menu vertical (qui est masqué si précédamment c'est un des autres éléments de menu qui a été cliqué), retire l'attribut position:fixed au menu horizontal qui en aurait, et appelle la fonction scroll_mvt() qui se charge de positionner le panneau désiré, quelqu'il soit, dans la fenêtre.


La deuxième fonction pose problème avec tous les menus horizontaux sauf avec le premier. On navigue comme je le souhaite sur la première rangée sans souci. Avec les autres, cependant, le menu cliqué disparaît tout bonnement. J'ai défini la variable leparent pour savoir plus précisément où ça coince, c'est sur la ligne leparent.addClass('fixed_position') que le menu disparaît. La console prétend que leparent est visible, et l'inspecteur note que la classe fixed_position a bien été ajouté au menu solicité. Avec l'inspecteur de Chrome, en passant la souris sur l'élément, ça met cet élément en surbrillance sur le document. Ici, l'inspecteur laisse entendre que le menu se situerait en bas, au-delà de la limite du document. jQuery dit qu'il se trouve à 1802 pixels du top de la fenêtre, alors que l'ancre se trouve à 1691 pixels de ce même top de la fenêtre. Même si ce n'est pas sa place, je drvrais le voir ... Bref, je ne sais plus quoi faire.

Salut,
tu aurais pas un lien vers la page pour faire des tests ?
Merci

Ben non, désolé. Je me doute bien que ça aurait été beaucoup plus clair .

Mais s'il faut résumer le tout en une phrase, voilà : quand j'applique la méthode addClass() à un sélecteur ul, parfois, ça me fait disparaître l'élément ul.
Modifié par Reflexive (17 Jan 2014 - 17:42)

Une balade, un grand bol d'air, et la solution m'est tombée dessus. Enfin, je crois.

Par défaut, le troisième menu horizontal se trouve à une distance du haut du document de plus de deux fois la hauteur de l'écran. En statique, je le vois en scrollant vers le bas. Mais, en fixe, il se trouve à plus de deux fois la hauteur de l'écran du haut de l'écran. Je ne risquait pas de le voir...