Problème de selecteur.

Bonjour,

Débutant en JS et jQuery, j'ai un problème que je n'arrive pas à résoudre ...
C'est dans la gestion d'un menu.

le menu étant dans une liste et le sous menu dans une autre, les deux listes ne sont pas 'imbriquées' l'une dans l'autre et ne peut pas le faire étant donnée que le sous menu apparait plus loin ...

la 1ére partie du menu tiens dans une liste :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

<div id="menu"> <ul> <li id="b_alpha"> <a href="#">Page divers</a> </li> <li id="b_bravo"> <a href="#">MENU GENERAL</a> </li> ... </ul> </div>

---

la deuxième partie, le sous menu apparait dans une liste déroulante horizontale dans un autre div :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

<div id="menu1"> <ul> <li class="bravo"> <h2>MENU GENERAL</h2> <a href="1.php"> page 1</a> <a href="2.php"> page 2</a> ... </li> ... </ul> </div>

---

Une ou deux chose à préciser :
- le lien contenu dans .b_alpha renvoi directement sur une page (donc pas d'animation menu)
- quand le visiteur survole un lien de #menu ( on va prendre .bravo pour exemple) le #menu1 > .bravo glisse sur la gauche et h2 (et les <a>) devraient s'afficher ...

mon problème est que #menu1 > .bravo glisse bien, mais impossible d'agir sur le h2 et les <a>

je met mon code JS

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<script type="text/javascript"> $(document).ready(function(){ $("#bouton li a").hover(function(){ // on récupére l'ID du lien du 1er menu var index = $("#bouton li a").index(this);   // on retire 1 étant donné que dans le 2em menu il n'y a pas de Alpha ... donc décalage var index2 = index - 1; //on récupére la largeur du div header (width 100%) var largeur = $("#header").width();   // petit calcul pour que chaque #menu1 > ul > li glisse jusqu au bord gauche de la page var decal = -(largeur / 2) + 140 - (70 * index2);   // On fait glisser le #menu1 > ul > li jusqu au bord gauche (pas de pb ça fonctionne) $("#menu1 ul li:eq(" + index2 + ")").animate({ marginLeft: "" + decal +"px" }, 500 );   // c est la que je bloque ... Il faut que je fasse apparaitre les <a> et le h2 ... mais je trouve pas le moyen de pointer dessus ! $("#menu1 ul li:eq(" + index2 + ")").animate({ opacity: 1, width: "360px", height: "160px", marginLeft: "" + decal +"px" }, 500 ); }); }); </script>

---

Donc mon problème est bien là :

Code:

---

$("#menu1 ul li:eq(" + index2 + ")").animate(

---

Comment bien sélectionner #menu1 ul li h2 et #menu1 ul li p ?????

Merci par avance pour votre aide / piste / astuce / retouche ... :king:

Bonjour,

Est-ce que ceci fonctionne ?

Code:

---

1 2	$("#menu1 > ul > li:eq(" + index2 + ") > h2").animate(

---

Sinon je n'ai pas très bien compris lorsque tu dis que le h2 et le p ne glissent pas, ils ne restent plus attachés à leur <li/> ?

Pourrais-t-on voir le CSS que tu leur a affecté, au cas ou ?

Code:

---

$("#menu1 > ul > li:eq(" + index2 + ") > h2").animate(

---

Ne fonctionne pas ... :/

pour le CSS :

Code:

---

1 2 3 4

#menu1 ul li p,#menu1 ul li h2{ width:0; height:0; }

---

et avec jQuery je voudrais modifier en

Code:

---

1 2 3

opacity: 0.9, width: "360px", height: "160px"

---

jQuery tolère-t-il une animation dans une animation ? (J'ai essayé ceci sans succès...)

Code:

---

1 2 3

$("#menu1 > ul > li:eq(" + index2 + ") > h2").animate( ... //remplacer par : $("#menu1 > ul > li:eq(" + index2 + ") > h2").css( ...

---

Je reste persuader que c'est lié au fait que je ne parviens pas à sélectionner un h2 ou un <a>

Code:

---

var index = $("#bouton li a").index(this);

---

C'est quoi index(this) ?

le

Code:

---

var index = $("#bouton li a").index(this);

---

, me sert à récupérer la valeur de l' eq() dans le 1er menu
alpha = 0
bravo = 1
...

je soustrait 1 pour faire corroborer eq() du menu avec celui du menu1
comme ça hover sur menu > bravo (donc eq(1)) agis sur le menu1 eq(0)

C est sans doute pas la meilleure méthode ... mais ca fait 2 jour que je joue avec Js et 6 heures avec jQuery ... donc ca peut paraitre brouillon mais ça fonctionne ... ;)

Mais index() n'existe pas !

Ca viens de jQuery ... je l'ai trouver en fouillant dur le site officiel :
http://docs.jquery.com/Core/index#subject

Citation:

---

Searches every matched element for the object and returns the index of the element, if found, starting with zero.

---

dont correspond à la valeur eq()

Re,

Que renvoie :

Code:

---

$("#menu1 > li:eq(0) > h2")

---

ou encore

Code:

---

$("#menu1 h2:eq(0)")

---

Je préfèrerait que tu passes par cette méthode:

Code:

---

1 2 3 4

var index = []; $('#button li a').each(function(){ index.push(this); });

---

ainsi tu peux jouer rien qu'en manipulant un tableau de DOM. Mais autre chose me tripatouille... Ou est ton ID #button dans le Html que tu nous a fourni car s'il n'est pas là c'est clair qu'il y a probléme

#button c'est un div contenant le ul ...

J'ai mit le h2 et les <a> dans un div .txt et modifié le js pour :

Code:

---

$("#menu1 ul li:eq(" + index2 + ") .txt")

---

ça marche nikel ;)

je ne comprend pas trop le:

Code:

---

1 2 3 4

var index = []; $('#button li a').each(function(){ index.push(this); });

---

C'est pour indexer dans un tableau les valeur eq() ?

Non, c'était pour mettre directement les DOM dans un tableau qui lui est indexé grâce à la suite logique en utilisant each(). C'est mieux de les stocker et de travailler ainsi selon moi bien sûr. Car je trouvais redondant le calcul des index.

Je suis pas familier avec le DOM ... pas encore eu le temps de me pencher là dessus... je pense comme toi que cette technique pourrait engendrer un certain gain (calcul à faire qu'une fois...)

Pour ce cas, je ne pense pas que le gain serait énorme ... peu d'éléments à indexer (5 dans le menu principal) (4 dans le ss menu) ... pour l'instant je vais me contenter de finir ça dans les délais les + brefs quitte à revenir plus tard pour jouer avec le dom ...

Peut tu confirmer mon impression sur le gain réel dans mon cas ?

Oui effectivement, mais tu sais les mauvaises habitudes sont difficiles à perdre ( je parle surtout pour moi) :P

héhé ... je suis un peu dans le même cas que toi ...
Reste à apprendre à gérer le DOM avant de prendre une autre habitude ...

Je me lancerai sur le sujet un peu plus tard ...

Merci pour votre aide et conseils ;)