Apparition avec ul li

**kev484** · 27/12/2007, 16h24

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 :

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

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 :

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

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";
  }
}

**SpaceFrog** · 27/12/2007, 17h26

Code :

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

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

**kev484** · 27/12/2007, 17h38

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...

**Djakisback** · 27/12/2007, 22h52

Salut,
tu peux faire comme ca :

Code :

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

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

**kev484** · 28/12/2007, 18h33

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

Code :

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

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 :

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

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...

**sachav** · 28/12/2007, 18h45

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

**sachav** · 28/12/2007, 18h50

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 :

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

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>

**kev484** · 28/12/2007, 18h50

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?

**kev484** · 28/12/2007, 19h01

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

Code :

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

        <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..)

**sachav** · 28/12/2007, 19h03

Oui, c'est possible :

Code :

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

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

**sachav** · 28/12/2007, 19h06

Pour la "main" :

Code :

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

<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 ?

**kev484** · 28/12/2007, 19h08

C'est a dire?

**jln13** · 28/12/2007, 19h08

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

Treves de plaisanteries, voici le code xhtml :

Code :

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

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>

**jln13** · 28/12/2007, 19h14

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 :

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

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>

**kev484** · 28/12/2007, 19h15

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.

**SpaceFrog** · 28/12/2007, 20h37

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

Apparition avec ul li

JavaScript

Discussions similaires

Partager

Partager