Sous menu ne se ferme pas
minimir
-
minimir -
minimir -
Bonsoir à tous,
Voici le code de la page qui me pose probleme
<!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" xml:lang="fr" lang="fr">
<head>
<title>Bienvenue sur le site Stade31</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" />
<SCRIPT language="Javascript">
<!--
function afficheMenu(obj){
var idMenu = obj.id;
var idSousMenu = 'sous' + idMenu;
var sousMenu = document.getElementById(idSousMenu);
/*****************************************************/
/** si le sous-menu correspondant au menu cliqué **/
/** est caché alors on l'affiche, sinon on le cache **/
/*****************************************************/
if(sousMenu.style.display == "none"){
sousMenu.style.display = "block";
}
else{
sousMenu.style.display = "none";
}
}
//-->
</SCRIPT>
<style type="text/css">
<!--
body {
background-color: #000000;
}
.Style1 { font-family: "Comic Sans MS";
font-size: 24px;
color: #FF0000;
}
.Style17 {font-family: Arial; color: #000000;}
.Style18 {font-weight: bold; color: #CC0000; font-family: Arial;}
.Style19 {font-size: 12}
.Style21 {
color: #FFFF00;
font-size: 10px;
font-weight: bold;
}
-->
</style></HEAD>
<body>
<div align="center"><a href="sommaire201011.htm"><img src="../images/logo%20accueil.jpg" width="100" height="115" border="0"></a>
</div>
<div id="menu">
<div class="menu" id="menu1" onclick="afficheMenu(this)">
<a href="sommairedroite.htm" target=="_top">Accueil</a>
</div>
<div class="menu" id="menu2" onclick="afficheMenu(this)">
<a href="#">Saison 2010-2011</a>
</div>
<div id="sousmenu2" style="display:none">
<div class="sousmenu">
<a href="photos20102011.htm" target="mainFrame">Mes photos</a>
</div>
<div class="sousmenu">
<a href="effectif20102011.htm" target="mainFrame">Effectif</a>
</div>
</div>
<div class="menu" id="menu3" onclick="afficheMenu(this)">
<a href="#">Saison 2009-2010</a>
</div>
<div id="sousmenu3" style="display:none">
<div class="sousmenu">
<a href="photos20092010.htm" target="mainFrame">Mes photos</a>
</div>
<div class="sousmenu">
<a href="#">Effectif</a>
</div>
</div>
<div class="menu" id="menu4" onclick="afficheMenu(this)">
<a href="#">Saison 2008-2009</a>
</div>
<div id="sousmenu4" style="display:none">
<div class="sousmenu">
<a href="photos20082009.htm" target="mainFrame">Mes photos</a>
</div>
<div class="sousmenu">
<a href="#">Effectif</a>
</div>
</div>
<div class="menu" id="menu5" onclick="afficheMenu(this)">
<a href="#">Saison 2007-2008</a>
</div>
<div id="sousmenu5" style="display:none">
<div class="sousmenu">
<a href="photos0708.htm" target="mainFrame">Mes photos</a>
</div>
<div class="sousmenu">
<a href="#">Effectif</a>
</div>
</div>
<div class="menu" id="menu6" onclick="afficheMenu(this)">
<a href="#">Entre Supporters</a>
</div>
<div id="sousmenu6" style="display:none">
<div class="sousmenu">
<a href="#">Mes liens</a>
</div>
<div class="sousmenu">
<a href="#">Mon livre d'or</a>
</div>
<div class="sousmenu">
<a href="mailto:tetanie31@hotmail.fr">Ecrivez-moi</a>
</div>
</div>
<div align="center"><span class="Style21">pour fermer le menu, cliquez sur la rubrique </span>
<p><span class="Style1"><span class="Style19"><span class="Style17"><span class="Style18"></span></span></span></span></p>
</div>
</div>
</body>
</html>
Pourriez vous me dire où j'ai fais l'erreur. Je ne sais pas pourquoi quand je clique sur une la saison 2009/2010 pour voir les photos, et que je clique apr_s sur la saison 2007-2008...Le sous menus de 2009-2010 reste "ouvert".
Je suis débutante....je vous remercie pour la patience que vous me témoignerez
Bonne soirée
Voici le code de la page qui me pose probleme
<!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" xml:lang="fr" lang="fr">
<head>
<title>Bienvenue sur le site Stade31</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" />
<SCRIPT language="Javascript">
<!--
function afficheMenu(obj){
var idMenu = obj.id;
var idSousMenu = 'sous' + idMenu;
var sousMenu = document.getElementById(idSousMenu);
/*****************************************************/
/** si le sous-menu correspondant au menu cliqué **/
/** est caché alors on l'affiche, sinon on le cache **/
/*****************************************************/
if(sousMenu.style.display == "none"){
sousMenu.style.display = "block";
}
else{
sousMenu.style.display = "none";
}
}
//-->
</SCRIPT>
<style type="text/css">
<!--
body {
background-color: #000000;
}
.Style1 { font-family: "Comic Sans MS";
font-size: 24px;
color: #FF0000;
}
.Style17 {font-family: Arial; color: #000000;}
.Style18 {font-weight: bold; color: #CC0000; font-family: Arial;}
.Style19 {font-size: 12}
.Style21 {
color: #FFFF00;
font-size: 10px;
font-weight: bold;
}
-->
</style></HEAD>
<body>
<div align="center"><a href="sommaire201011.htm"><img src="../images/logo%20accueil.jpg" width="100" height="115" border="0"></a>
</div>
<div id="menu">
<div class="menu" id="menu1" onclick="afficheMenu(this)">
<a href="sommairedroite.htm" target=="_top">Accueil</a>
</div>
<div class="menu" id="menu2" onclick="afficheMenu(this)">
<a href="#">Saison 2010-2011</a>
</div>
<div id="sousmenu2" style="display:none">
<div class="sousmenu">
<a href="photos20102011.htm" target="mainFrame">Mes photos</a>
</div>
<div class="sousmenu">
<a href="effectif20102011.htm" target="mainFrame">Effectif</a>
</div>
</div>
<div class="menu" id="menu3" onclick="afficheMenu(this)">
<a href="#">Saison 2009-2010</a>
</div>
<div id="sousmenu3" style="display:none">
<div class="sousmenu">
<a href="photos20092010.htm" target="mainFrame">Mes photos</a>
</div>
<div class="sousmenu">
<a href="#">Effectif</a>
</div>
</div>
<div class="menu" id="menu4" onclick="afficheMenu(this)">
<a href="#">Saison 2008-2009</a>
</div>
<div id="sousmenu4" style="display:none">
<div class="sousmenu">
<a href="photos20082009.htm" target="mainFrame">Mes photos</a>
</div>
<div class="sousmenu">
<a href="#">Effectif</a>
</div>
</div>
<div class="menu" id="menu5" onclick="afficheMenu(this)">
<a href="#">Saison 2007-2008</a>
</div>
<div id="sousmenu5" style="display:none">
<div class="sousmenu">
<a href="photos0708.htm" target="mainFrame">Mes photos</a>
</div>
<div class="sousmenu">
<a href="#">Effectif</a>
</div>
</div>
<div class="menu" id="menu6" onclick="afficheMenu(this)">
<a href="#">Entre Supporters</a>
</div>
<div id="sousmenu6" style="display:none">
<div class="sousmenu">
<a href="#">Mes liens</a>
</div>
<div class="sousmenu">
<a href="#">Mon livre d'or</a>
</div>
<div class="sousmenu">
<a href="mailto:tetanie31@hotmail.fr">Ecrivez-moi</a>
</div>
</div>
<div align="center"><span class="Style21">pour fermer le menu, cliquez sur la rubrique </span>
<p><span class="Style1"><span class="Style19"><span class="Style17"><span class="Style18"></span></span></span></span></p>
</div>
</div>
</body>
</html>
Pourriez vous me dire où j'ai fais l'erreur. Je ne sais pas pourquoi quand je clique sur une la saison 2009/2010 pour voir les photos, et que je clique apr_s sur la saison 2007-2008...Le sous menus de 2009-2010 reste "ouvert".
Je suis débutante....je vous remercie pour la patience que vous me témoignerez
Bonne soirée
A voir également:
- Sous menu ne se ferme pas
- Application se ferme toute seule android - Guide
- Menu déroulant excel - Guide
- Rouvrir onglet fermé chrome - Guide
- Canon quick menu - Télécharger - Utilitaires
- Coco.fr fermé - Accueil - Réseaux sociaux
1 réponse
Salut,
Dans ta fonction Javascript, tu gères l'ouverture/fermeture du menu sur lequel tu cliques.
Il faut que tu rajoute un peu de code. Dans ton if tu dois faire :
Autrement dit, ce que je te conseille c'est de faire une boucle pour fermer tous les menus avant d'ouvrir le tiens, du genre :
Tu as compris le truc ?
Tant qu'on ne fait pas, on ne sait pas.
Dans ta fonction Javascript, tu gères l'ouverture/fermeture du menu sur lequel tu cliques.
Il faut que tu rajoute un peu de code. Dans ton if tu dois faire :
SI (le menu est fermé) {
ouvrir le menu ;
fermer tous les autres ;
} SINON {
fermer le menu ;
}
Autrement dit, ce que je te conseille c'est de faire une boucle pour fermer tous les menus avant d'ouvrir le tiens, du genre :
function afficheMenu(obj){
var idMenu = obj.id;
var idSousMenu = 'sous' + idMenu;
var sousMenu = document.getElementById(idSousMenu);
if(sousMenu.style.display == "none"){
for (var i=0; i<6 ;i++ {
var idFermeture = "sousmenu"+i ;
document.getElementById(i).style.display = "none";
}
sousMenu.style.display = "block";
}
else{
sousMenu.style.display = "none";
}
}
Tu as compris le truc ?
Tant qu'on ne fait pas, on ne sait pas.
je teste demain et je te tiens au courant
merci en tout cas pour ton aide :)