Jquery fonction hide

Bonjour à tous,

JavaScript continue de me faire des misères.

Je cherche à afficher/cacher une div au survol de son parent.

Voici le PHP/HTML

if (InternauteEstConnecteEtEstAdmin()){ //Si membre admin
		echo '<a id="administration" href="">Administration</a>';
		echo '<div id="menuAdmin">';
		echo '<a href="'. RACINE_SITE .'admin/gestionDesSalles.php">Gestion des salles</a>';
			echo '<div class="detailMenu">'; 
				echo '<a href="?action=affichage">Affichage des salles.</a>'; 
				echo '<a href="?action=ajout">Ajout d\'une salle.</a>'
			echo '</div>';
		echo '<a href="'. RACINE_SITE .'admin/gestionDesProduits.php">Gestion des produits</a>';
			echo '<div class="detailMenu">';
,                               echo '<a href="?action=affichage">Affichage des produits</a>';
				echo '<a href="?action=ajout">Ajout d\'un produit</a>';
			echo '</div>';

Pour résumer : On a un bouton administrateur, on le survole apparait le menu administrateur et après si on survole les différents liens on doit voir apparaitre encore un sous-menu (ce sont les DIVs class=".detailMenu").

J'arrive à cibler la première class :"detailMenu" Par :

$('.detailMenu')[0]

Mais lorsque que je lui rajoute ".hide" la console me ressors que hide is not function .
Pour moi il faudrait écrire :

$('.detailMenu')[0].hide();

Et dois y avoir une erreur dans ma synthax car je cache le menu administrateur avec la fonction suivante et ça marche comme je veux ?

$(function() {
	$('#menuAdmin').hide();
	$('#administration').mouseover(
		function () {
		$('#menuAdmin').show();
	});
});

Modifié par Soxy95 (18 Jan 2016 - 15:41)

Bonjour,

sans tester moi-même je ne sais pas pourquoi [0] n'est plus un objet jQuery auquel tu peux appliquer un .hide() mais ceci devrait fonctionner :

$('.detailMenu').eq(0).hide();

Doc jQuery de .eq()

Et sinon je te conseille plutôt de gérer une classe .is-hidden (ou .js-hidden) qui en CSS correspond à la règle :

.is-hidden {
    display: none;
}

avec addClass et removeClass ou toggleClass()
Cela évite d'utiliser .show() qui force un display: block; sur un élément alors qu'en 2016 on peut souvent avoir envie de styler un élément avec un display: table-cell ou inline-block ou flex ou table et patatras quand il se retrouve stylé comme block !
(et pour éviter les incompréhnesions, le participe passé "js-hidden" est plus mieux que "js-hide": on ne sait pas si hide est l'état visuel actuel de l'élément ou l'action qui aura lieu quand on aura cliqué dessus !)

Salut,

Quand tu utilises ce genre de syntaxe ($('.detailMenu')[0].hide()) ton object courant (ici jQuery) n'est plus retourné. Du coup tu perds le contexte. Ici, tu essayes de faire un .show() sur un object de type HTMLElement, donc du coup oui, c'est bien une fonction inconnue.

La solution pour ne pas perdre ce "contexte" jQuery est effectivement de chainer les fonctions.

un grand merci pour vos pistes !!! c'est le chainage qui m'a mis sur la voie + le fait de jouer avec le style plutot que hide & show !

Voici le code JS qui fonctionne (Je suis passer du survol au click

$(function() { // sous menu des produits
	document.getElementsByClassName('detailMenu')[0].style.display='none';
	document.getElementsByTagName('p')[0].onclick = function(){
	document.getElementsByClassName('detailMenu')[0].style.display='block';
	document.getElementsByTagName('p')[0].onclick = function(){
	document.getElementsByClassName('detailMenu')[0].style.display='none';
	};
	};
});

- En fait le mieux c'est de jouer avec des class qui changent le style. Tu ajoutes/retires une class hidden et le tour est joué. Beaucoup plus souple, tu verras
- Le code que tu as donné est en full JS, sauf pour la première ligne qui peut être aussi facilement remplacé. Si tu charges jQuery autant s'en servir. Par contre si tu ne t'en sers pas, mieux vaut pas le charger, mais il faut choisir

Bonne continuation