Apparition avec ul li

Version imprimable

Bonjour j'aimerai qu'en ciquant que ma partie Top 14 alors des sous-partie apparaissent. Or j'ai un soucis car le onclick dans un li ne fonctionne pas.
Code:

1 2 3 4 5 6 7 8 9 <h3>Le Top 14</h3> <ul> <li>Tout sur le Top 14 onclick="top_detail()"</li> <div id="top_details"> <li>Les équipes</li> <li>Les résultats</li> <li>Le classement</li> </div> </ul>
Voila ma fonction mais elle ne fonctionne si quelqu'un pouvait m'aider car je debute en javascript.
Code:

1 2 3 4 5 6 7 8 9 function menu_top() { top=document.getElementById("top_details"); if(document.getElementById("top_details")) { top.style.display="block"; } else { top.style.display="none"; } }

27/12/2007, 17h26
SpaceFrog

Code:

<li onclick="top_detail()">Tout sur le Top 14 </li>

:roll:
27/12/2007, 17h38
kev484

Ok deja merci mais j'ai toujours mon probleme ma fonction est mal ecrite et je ne vois pas comment faire pour afficher que si il clique dessus...
27/12/2007, 22h52
Djakisback
Salut,
tu peux faire comme ca :
Code:

1 2 3 4 5 6 7 8 9 function menu_top() { top=document.getElementById("top_details"); if(top.style.display=="none") { top.style.display="block"; } else { top.style.display="none"; } }
Il faudrait que tu passes un paramètre à ta fonction si tu veux l'utiliser sur tous les sous-menus, soit l'id, soit le noeud suivant le li.
Bye

Voila avec les modification apportées et mon idée ne fonctionne toujours aps je ne comprends pas pourquoi : html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
  <script src="index.js" type="text/javascript"></script>
<body onload="menu_top()">
    <div class="sous_menu">
      <h3>Le Top 14</h3>
      <ul>
        <li onclick="menu_top()">Tout sur le Top 14 </li>
          <div id="top_details">
          <li>Les équipes</li>
          <li>Les résultats</li>
          <li>Le classement</li>
      </div>
      </ul> 
</div>

Et voila ma fonction :

Code:

1
2
3
4
5
6
7
8
9
function menu_top()
{
  top=document.getElementById("top_details");
  if(top.style.display=="none") {
    top.style.display="block";
  } else {
    top.style.display="none";
  }
}

Je ne vois pas l'erreur...

28/12/2007, 18h45
sachav

8O 8O 8O 8O 8O

Chez moi ca marche sur firefox mais pas sur IE... Encore jamais vu un truc si simple bugger sur IE...

J'ai trouve:

1. Change la variable 'top' en 'haut' car top est un mot-cle en JS (en tout cas pour IE)
2. Mets un span plutot qu'un div, IE deteste les div...

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
 
<script language="javascript">
function menu_top()
{
  haut=document.getElementById("top_details");
  if(haut.style.display=="none" || haut.style.visibility=="hidden") {
    haut.style.display="block";
  } else {
    haut.style.display="none";
  }
}
</script>
 
<body onload="menu_top()">
    <div class="sous_menu">
      <h3>Le Top 14</h3>
      <ul>
        <li onclick='menu_top()'>Tout sur le Top 14</li>
          <span id="top_details">
          <li>Les équipes</li>
          <li>Les résultats</li>
          <li>Le classement</li>
      </span>
      </ul> 
</div>

28/12/2007, 18h50
kev484

Oui exact cela fonctionne sous FF et non sous IE... Et comment puis-je faire pour que lorsque je met la souris sur mon titre il devient souligné et une info-bulle apparaisse?? Esce possible de mettre un onclick et un onmouseover dans le meme li?
28/12/2007, 19h01
kev484

C'est bon probleme resolu pour le onmouseover voila ce que j'ai mis est-ce adequate?

Code:

<li onclick='menu_top()' onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">Tout sur le Top 14</li>

Derniere question j'aimerai que ce soit une main et non un truc pour ecrire quand l'on pointe dessus?( je ne sais pas si c'est tres claire..)
28/12/2007, 19h03
sachav

Oui, c'est possible :

Code:

<li onclick='menu_top()' onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'" title="Bonjour">Tout sur le Top 14</li>
28/12/2007, 19h06
sachav

Pour la "main" :

Code:

<li onclick='menu_top()' onmouseover="this.style.textDecoration='underline'; this.style.cursor='hand'" title="Bonjour" onmouseout="this.style.textDecoration='none' ">Tout sur le Top 14</li>

Une minute, pourquoi ne pas faire tout simplement un <a href='javascript:menu_top'> au lieu de se casser la tete a faire tout ca ?
28/12/2007, 19h08
kev484

C'est a dire?

salut,

je me permets de revenir un peu en arrière sur le post car le coup du "ie n'aime pas les div" m'a un peu étonné ^^

En fait le problème de ton code était que tu mélangeais des div dans des balises <ul> et <li> ce qui n'est pas valide XHTML et fait que ca bugge sur IE.

En faisant deux listes pour éviter de mélanger les <div> et <li> alors tout fonctionnera niquel sous FF et IE! D'ou l'intéret de faire des pages XHTML :mouarf:

Treves de plaisanteries, voici le code xhtml :
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 30 31 32 33 34 35 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title></title> <script type="text/javascript"> function menu_top() { montop=document.getElementById("top_details"); if(montop.style.display=="none") { montop.style.display="block"; } else { montop.style.display="none"; } } </script> </head> <body onload="menu_top()"> <div class="sous_menu"> <h3>Le Top 14</h3> <ul> <li onclick="menu_top()">Tout sur le Top 14 </li> </ul> <div id="top_details"> <ul> <li>Les équipes</li> <li>Les résultats</li> <li>Le classement</li> </ul> </div> </div> </body> </html>

Je continue a faire mon relou mais pour le curseur type "main" le code cursor:hand est propriétaire IE et ne marche donc pas sous FF ^^

Il vaut mieux utiliser pointer :
Code:

1 2 <li onclick='menu_top()' onmouseover="this.style.textDecoration='underline'; this.style.cursor='pointer'" title="Bonjour" onmouseout="this.style.textDecoration='none' ">Tout sur le Top 14</li>

28/12/2007, 19h15
kev484

Merci beaucoup tout mes problemes sont résolus et j'ai opté pour la seconde methode, celle proposée par jln 13. Merci pour vos aides.
28/12/2007, 20h37
SpaceFrog

pour la main c'est plutot pointer que hand ...