Javascript - Petit bug dans menu dynamique

Question

Saori

7 Jun 2011 à 02:04

Bonsoir,

Je dois réaliser un simple menu vertical en cascade... Je gère le HTML/CSS ms pas le Javascript. Ds le code qui suit, le soucis c que le 1er clik sur un des menus ne sert à rien, je dois réitérer l'action pour faire apparaître le sous-menu correspondant... Qq1 pourrait me donner la solution pour que, dès le 1er clic, le sous-menu s'affiche ? J'espère avoir été assez claire ^^

Merci d'avance !

Le code en question :

MENU.HTML
<html>

<head>
<style type="text/css">
.menu {display:none;}
.submenu {display:none;}
</style>

<script language="JavaScript">
function springing_Menu(currMenu) {
var i;
var pos= document.getElementById(currMenu).style.display;

if (currMenu.search('submenu')==-1)
{ for (i=1;i<6;i++) { document.getElementById('menu'+i).style.display='none';}
if (pos=='none') {document.getElementById(currMenu).style.display='block';}
}

if (currMenu.search('submenu')!=-1)
{ for (i=51;i<60;i++)
{ document.getElementById('submenu'+i).style.display='none';}
if (pos=='none') {document.getElementById(currMenu).style.display='block';}
}

}
</script>
</head>

<body>

<p><a href='#' onClick="return springing_Menu('menu1')">Menu 1</a>
<span class='menu' id='menu1'>Menu 1.1</span></p>

<p><a href='#' onClick="return springing_Menu('menu2')">Menu 2</a>
<span class='menu' id='menu2'>Menu 2.1</span></p>

<p><a href='#' onClick="return springing_Menu('menu3')">Menu 3</a>
<span class='menu' id='menu3'>Menu 3.1</span>

<p><a href='#' onClick="return springing_Menu('menu4')">Menu 4</a>
<span class='menu' id='menu4'>Menu 4.1</span>

<p><a href='#' onClick="return springing_Menu('menu5')">Menu 5</a>
<span class='menu' id='menu5'>Menu 5.1</span>

</body>
</html>

MENU.JS
//au chargement de la page, on appelle la fonction montre()
window.onload=montre;

//affichage du menu déroulant et placement de ce dernier
function montre(id,affiche)
{
var d = document.getElementById(id);
//si on quitte un élément du menu
if (d && !affiche)
{
d.style.display='none'; //on l'efface
var c=d.parentNode; //son parent
if (c.parentNode.parentNode.parentNode.tagName!='DIV') //si c'est un sous-menu, on rend à son parent les couleurs d'origine
{
c.firstChild.style.color='#39f';
c.firstChild.style.background='#fff';
}
}
//sinon si on se mets sur un élément du menu
else if (d && affiche)
{
d.style.display='block'; //on l'affiche
var c=d.parentNode; //son parent
if (c.parentNode.parentNode.parentNode.tagName!='DIV') //si c'est un sous-menu, on donne à son parent les couleurs de survol
{
c.firstChild.style.color='#fff';
c.firstChild.style.background='#39f';
}
}
}

jiber2fr

7 Jun 2011 à 07:56

Bonjour,

J'ai pas épluché ton code en détail (c'est impossible vu que tu n'as pas utilisé le bouton "Javascript" pour le poster), mais à mon avis le soucis vient de là:

if (pos=='none') { ... }

Tes liens n'ont pas la propriété css "display" renseignée via l'attribut "style". Donc la première fois qu'on clique, document.getElementById(currMenu).style.display vaut, je pense, une chaine vide.

D'après moi, une solution serait d'indiquer le style dans chaque élément de ton menu:

<a href='#' onclick="return springing_Menu('menu1')" style="display:none">Menu 1</a>

Ça devrait fonctionner.
Modifié par jiber2fr (07 Jun 2011 - 08:19)

lddsoft

7 Jun 2011 à 11:32

Bonjour,
La solution est très simple:

<script type="text/javascript">
function springing_Menu(currMenu) {
var i;
var pos= document.getElementById(currMenu).style;

if (currMenu.search('submenu')==-1) 
{ for (i=1;i<6;i++) { document.getElementById('menu'+i).style.display='none';}
if (pos.display=='none') {pos.display='block';}
}

if (currMenu.search('submenu')!=-1) 
{ for (i=51;i<60;i++) 
{ document.getElementById('submenu'+i).style.display='none';}
if (pos.display=='none') {pos.display='block';}
}

}
</script>

Remarque le changement de valeur pour ta variable "pos", puis "pos.display" ! Smiley cligne

Modifié par lddsoft (07 Jun 2011 - 19:58)

Sujet clos