11548 sujets

JavaScript, DOM et API Web HTML5

[résolu] Menu déroulant : comportement JavaScript très étrange

Salut à tous, Smiley smile

J'ai créé il y a quelques temps de cela un site pour me faciliter la vie. Il m'aide à répertorier les cartes d'un jeu à collectionner et ça va beaucoup plus vite à consulter pour voir ce qu'il me manque plutôt que d'ouvrir les vrais classeurs. Smiley langue

Au fur et à mesure de l'apparition de nouveaux blocs et de nouvelles éditions, je mets à jours le menu afin d'avoir les nouvelles pages. Le menu est de type déroulant avec du JavaScript.

Dans 2 semaines va sortir un nouveau bloc. J'ai donc, comme d'habitude, mis à jours le menu. Mais là, j'ai un comportement inhabituel : le sous-menu du dernier bloc ajouté reste déroulé !

Et franchement, je vois pas du tout où ça peut venir ... Smiley sweatdrop

la page en ligne

Le code du menu :
<div id="menu_gauche">
	
	<dl id="menu">
	
		<dt><a href="/">Index</a></dt>
	
		<dt><a href="/index-recherches.php">Accueil</a></dt>

		<dt onmouseover="javascript:montre('smenu13');" onmouseout="javascript:montre();">"Anglaises"</dt>
			<dd id="smenu13" onmouseover="javascript:montre('smenu13');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="/r-alpha.php">Alpha</a></li>
					<li><a href="/r-beta.php">Beta</a></li>
					<li><a href="/r-arabian-nights.php">Arabian Nights</a></li>
					<li><a href="/r-antiquities.php">Antiquities</a></li>
					<li><a href="/r-legends.php">Legends</a></li>
					<li><a href="/r-the-dark.php">The Dark</a></li>
					<li><a href="/r-fallen-empires.php">Fallen Empires</a></li>
				</ul>
			</dd>

		<dt onmouseover="javascript:montre('smenu14');" onmouseout="javascript:montre();">"Comiques"</dt>	
			<dd id="smenu14" onmouseover="javascript:montre('smenu14');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="/r-unglued.php">Unglued</a></li>
					<li><a href="/r-unhinged.php">Unhinged</a></li>
				</ul>
			</dd>	

		<dt onmouseover="javascript:montre('smenu15');" onmouseout="javascript:montre();">"Divers"</dt>
			<dd id="smenu15" onmouseover="javascript:montre('smenu15');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="/r-noir-trois.php">3ème bords noirs</a></li>
					<li><a href="/r-portal.php">Portal</a></li>
					<li><a href="/r-portal2.php">Portal Second Age</a></li>
					<li><a href="/r-portal3.php">Portal Three Kingdoms</a></li>
					<li><a href="/r-renaissance.php">Renaissance</a></li>
					<li><a href="/r-apac-lands.php">Apac lands</a></li>
					<li><a href="/r-euro-lands.php">Euro lands</a></li>
					<li><a href="/r-guru-lands.php">Guru lands</a></li>
					<li><a href="/r-anthologies.php">Anthologies</a></li>
					<li><a href="/r-battle-royale.php">Battle Royale</a></li>
					<li><a href="/r-beatdown.php">Beatdown</a></li>
					<li><a href="/r-deckmasters.php">Deckmasters</a></li>
					<li><a href="/r-duel-decks.php">Dual Decks</a></li>
					<li><a href="/r-from-the-vault.php">From the Vault</a></li>
					<li><a href="/r-planechase.php">Planechase</a></li>
				</ul>
			</dd>	

		<dt onmouseover="javascript:montre('smenu16');" onmouseout="javascript:montre();">"Spéciales"</dt>	
			<dd id="smenu16" onmouseover="javascript:montre('smenu16');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="/r-arena-league.php">Arena League</a></li>
					<li><a href="/r-champs-states.php">Champs / States</a></li>
					<li><a href="/r-dci.php">D.C.I.</a></li>
					<li><a href="/r-fnm.php">Friday Night Magic</a></li>
					<li><a href="/r-gateway.php">Gateway</a></li>
					<li><a href="/r-harperprism.php">HarperPrism</a></li>
					<li><a href="/r-jinghe-age.php">Jinghe Age</a></li>
					<li><a href="/r-player-rewards.php">Player Rewards</a></li>
					<li><a href="/r-prerelease.php">Prerelease</a></li>
					<li><a href="/r-release-events.php">Release events</a></li>
					<li><a href="/r-box-toppers-8.php">Box toppers 8ème édition</a></li>
					<li><a href="/r-box-toppers-9.php">Box toppers 9ème édition</a></li>
					<li><a href="/r-oversized6x9.php">Oversized 6x9</a></li>
					<li><a href="/r-vanguard.php">Vanguard</a></li>
				</ul>
			</dd>	

		<dt onmouseover="javascript:montre('smenu11');" onmouseout="javascript:montre();">"Réédition"</dt>
			<dd id="smenu11" onmouseover="javascript:montre('smenu11');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="/r-unlimited.php">Unlimited</a></li>
					<li><a href="/r-chronicles.php">Chronicles</a></li>
					<li><a href="/r-blanc-trois.php">3ème</a></li>
					<li><a href="/r-blanc-quatre.php">4ème</a></li>
					<li><a href="/r-blanc-quatre-simplifiee.php">4ème simplifiée</a></li>
					<li><a href="/r-blanc-cinq.php">5ème</a></li>
					<li><a href="/r-blanc-six.php">6ème</a></li>
					<li><a href="/r-blanc-sept.php">7ème</a></li>
					<li><a href="/r-blanc-huit.php">8ème</a></li>
					<li><a href="/r-blanc-neuf.php">9ème</a></li>
					<li><a href="/r-blanc-dix.php">10ème</a></li>
					<li><a href="/r-magic-2010.php">Magic 2010</a></li>
				</ul>
			</dd>

			<dt onmouseover="javascript:montre('smenu21');">Zendikar</dt>
			<dd id="smenu21" onmouseover="javascript:montre('smenu21');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="/r-zendikar.php">Zendikar</a></li>
				</ul>
			</dd>	

			<dt onmouseover="javascript:montre('smenu20');">Alara</dt>
			<dd id="smenu20" onmouseover="javascript:montre('smenu20');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="/r-eclats-alara.php">Les éclats d'Alara</a></li>
					<li><a href="/r-conflux.php">Conflux</a></li>
					<li><a href="/r-renaissance-alara.php">La renaissance d'Alara</a></li>
				</ul>
			</dd>	

			<dt onmouseover="javascript:montre('smenu19');">Sombrelande</dt>
			<dd id="smenu19" onmouseover="javascript:montre('smenu19');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="/r-sombrelande.php">Sombrelande</a></li>
					<li><a href="/r-coucheciel.php">Coucheciel</a></li>
				</ul>
			</dd>	

			<dt onmouseover="javascript:montre('smenu18');">Lorwyn</dt>
			<dd id="smenu18" onmouseover="javascript:montre('smenu18');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="/r-lorwyn.php">Lorwyn</a></li>
					<li><a href="/r-leveciel.php">Lèveciel</a></li>
				</ul>
			</dd>	

			<dt onmouseover="javascript:montre('smenu17');">Temporel</dt>
			<dd id="smenu17" onmouseover="javascript:montre('smenu17');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="/r-spirale-temporelle.php">Spirale temporelle</a></li>
					<li><a href="/r-spirale-temporelle-decalee.php">Spirale temporelle décalée</a></li>
					<li><a href="/r-chaos-planaire.php">Chaos planaire</a></li>
					<li><a href="/r-vision-avenir.php">Vision de l'avenir</a></li>
				</ul>
			</dd>	

		<dt onmouseover="javascript:montre('smenu1');">Ravnica</dt>
			<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="/r-ravnica.php">Ravnica</a></li>
					<li><a href="/r-pacte-guildes.php">Le pacte des guildes</a></li>
					<li><a href="/r-discorde.php">Discorde</a></li>
				</ul>
			</dd>	
			
		<dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">Kamigawa</dt>
			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="/r-guerriers-kamigawa.php">Guerriers de Kamigawa</a></li>
					<li><a href="/r-traitres-kamigawa.php">Traîtres de Kamigawa</a></li>
					<li><a href="/r-liberateurs-kamigawa.php">Libérateurs de Kamigawa</a></li>
				</ul>

			</dd>	

		<dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">Mirrodin</dt>
			<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="/r-mirrodin.php">Mirrodin</a></li>
					<li><a href="/r-sombracier.php">Sombracier</a></li>
					<li><a href="/r-cinq-aube.php">La 5ème aube</a></li>
				</ul>
			</dd>

		<dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">Carnage</dt>

			<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="/r-carnage.php">Carnage</a></li>
					<li><a href="/r-fleau.php">Fléau</a></li>
					<li><a href="/r-legions.php">Légions</a></li>
				</ul>
			</dd>

		<dt onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();">Odysée</dt>

			<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="/r-odysee.php">Odysée</a></li>
					<li><a href="/r-jugement.php">Jugement</a></li>
					<li><a href="/r-tourment.php">Tourment</a></li>
				</ul>
			</dd>

		<dt onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre();">Invasion</dt>

			<dd id="smenu6" onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="/r-invasion.php">Invasion</a></li>
					<li><a href="/r-planeshift.php">Planeshift</a></li>
					<li><a href="/r-apocalypse.php">Apocalypse</a></li>
				</ul>
			</dd>

		<dt onmouseover="javascript:montre('smenu7');" onmouseout="javascript:montre();">Mercadia</dt>

			<dd id="smenu7" onmouseover="javascript:montre('smenu7');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="/r-masques-mercadia.php">Masques de Mercadia</a></li>
					<li><a href="/r-nemesis.php">Nemesis</a></li>
					<li><a href="/r-prophetie.php">Prophétie</a></li>
				</ul>
			</dd>

		<dt onmouseover="javascript:montre('smenu8');" onmouseout="javascript:montre();">Urza</dt>

			<dd id="smenu8" onmouseover="javascript:montre('smenu8');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="/r-epopee-urza.php">L'épopée d'Urza</a></li>
					<li><a href="/r-heritage-urza.php">L'héritage d'Urza</a></li>
					<li><a href="/r-destinee-urza.php">La destinée d'Urza</a></li>
				</ul>
			</dd>

		<dt onmouseover="javascript:montre('smenu9');" onmouseout="javascript:montre();">Tempête</dt>

			<dd id="smenu9" onmouseover="javascript:montre('smenu9');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="/r-tempete.php">Tempête</a></li>
					<li><a href="/r-forteresse.php">Forteresse</a></li>
					<li><a href="/r-exode.php">Exode</a></li>
				</ul>
			</dd>

		<dt onmouseover="javascript:montre('smenu10');" onmouseout="javascript:montre();">Mirage</dt>

			<dd id="smenu10" onmouseover="javascript:montre('smenu10');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="/r-mirage.php">Mirage</a></li>
					<li><a href="/r-visions.php">Visions</a></li>
					<li><a href="/r-aquilon.php">Aquilon</a></li>
				</ul>
			</dd>

		<dt onmouseover="javascript:montre('smenu12');" onmouseout="javascript:montre();">Ere Glaciaire</dt>

			<dd id="smenu12" onmouseover="javascript:montre('smenu12');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="/r-ere-glaciaire.php">Ere glaciaire</a></li>
					<li><a href="/r-alliances.php">Alliances</a></li>
					<li><a href="/r-souffle-glaciaire.php">Souffle glaciaire</a></li>
				</ul>
			</dd>

		<dt><a href="/r-terres-natales.php">Terres Natales</a></dt>
			
	</dl>

	<img src="/design/lotus.gif" width="123" height="143" alt="" />
	
</div>


Merci d'avance de vos retours. Smiley biggrin
Modifié par Pandore (14 Sep 2009 - 22:36)
Salut,

ton dernier block a comme id smenu21 mais ta fonction s'arrête à 20 :
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=20; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
Arf mais oui bien sur ! Smiley confused Je me disais bien que le code du menu n'avait pas raison de faire buger l'affichage.

Bien vu Heyoan ! Smiley cligne Merci ! Smiley biggrin
Sujet clos
Aller à