11496 sujets

JavaScript, DOM et API Web HTML5

Menu déroulant qui ne se ferme pas à l'appuie des autres sous menu

Bonjour aujourd'hui j'aurais besoin de votre aide car je suis dans l'impasse.
Je ne m'y connais pas trop en javascript mais dans mon cas je suis obligé de l'utiliser.

Je m'explique, j'ai un menu et il faut que lors de l'appuie sur un des liens une div s'affiche.
J'ai réussi à le faire mais lorsque j'appuie sur un des autres liens la div précédemment ouverte ne se ferme pas et donc j'ai deux div d'ouvertes.
Pour mieux comprendre voici le code:


<script>
	function my_trima()
			{
			divInfo = document.getElementById('my_trima');
			if (divInfo.style.display == 'none')
			divInfo.style.display = 'block';
			else
			divInfo.style.display = 'none';
			}
			
			function my_catam()
			{
			divInfo = document.getElementById('my_catam');
			if (divInfo.style.display == 'none')
			divInfo.style.display = 'block';
			else
			divInfo.style.display = 'none';
			}
			
			function sy_trima()
			{
			divInfo = document.getElementById('sy_trima');
			if (divInfo.style.display == 'none')
			divInfo.style.display = 'block';
			else
			divInfo.style.display = 'none';
			}
			
			function sy_catam()
			{
			divInfo = document.getElementById('sy_catam');
			if (divInfo.style.display == 'none')
			divInfo.style.display = 'block';
			else
			divInfo.style.display = 'none';
			}
			
</script>




<div id="sy_catam" style="display: none;">
		<div class="contenu_menu_name">
			Sail Yachts Catamaran :
		</div>
		<div class="contenu_menu">
			BCY 78'
		</div>
		<div class="contenu_menu">
			BCY 82'
		</div>
		<div class="contenu_menu">
			BCY 85'
		</div>
		<div class="contenu_menu">
			BCY 88' DD
		</div>
		<div class="contenu_menu">
			BCY 92' RAFOLY
		</div>
		<div class="contenu_menu">
			BCY 95' CARTOUCHE
		</div>
		<div class="contenu_menu">
			BCY 101' DD
		</div>
		<div class="contenu_menu">
			BCY 105'
		</div>
		<div class="contenu_menu">
			BCY 135'
		</div>
		<div class="contenu_menu">
			BCY 150'
		</div>
		<div class="contenu_menu">
			BCY 165'
		</div>
	</div> 
	
	<div id="sy_trima" style="display: none;">
		<div class="contenu_menu_name">
			Sail Yachts Trimaran :
		</div>
		<div class="contenu_menu">
			BCY 78'
		</div>
		<div class="contenu_menu">
			BCY 82'
		</div>
		<div class="contenu_menu">
			BCY 85'
		</div>
		<div class="contenu_menu">
			BCY 88' DD
		</div>
		<div class="contenu_menu">
			BCY 92' RAFOLY
		</div>
		<div class="contenu_menu">
			BCY 95' CARTOUCHE
		</div>
		<div class="contenu_menu">
			BCY 101' DD
		</div>
		<div class="contenu_menu">
			BCY 105'
		</div>
		<div class="contenu_menu">
			BCY 135'
		</div>
		<div class="contenu_menu">
			BCY 150'
		</div>
		<div class="contenu_menu">
			BCY 165'
		</div>
	</div>
	<div id="my_catam" style="display: none;">
		<div class="contenu_menu_name">
			Motor Yachts Catamaran :
		</div>
		<div class="contenu_menu">
			BCY 77'
		</div>
	</div>
	<div id="my_trima" style="display: none;">
		<div class="contenu_menu_name">
			Motor Yachts Trimaran :
		</div>
		<div class="contenu_menu">
			BCY 203'
		</div>
	</div>


Voici un screenshot plus parlant:

upload/53577-sousmenubu.jpg

J'ai encadré en rouge les 4 div.

Merci
Bonjour s'il vous plait j'ai vraiment besoin d'aide. Je suis en stage et si je ne réussi pas ça c'est foutu pour moi.

Cordialement
Merci
Bonjour toto2012,

Afin de vous aider au mieux, il serait préférable que vous donniez accès à une page contenant vos ressources de base.

Le soucis c'est que vous transmettez un JS d'un côté et le HTML de l'autre sans que l'on puisse connaitre la chronologie d'exécution : à quel moment les fonctions JS sont-elles appelées ?!

En attendant vos informations complémentaires.
Bon courage...
Modifié par Guiwint (26 Feb 2014 - 22:01)
Bonjour, merci d'avoir répondu.
Le site n'est pas hébergé il est seulement sur un ordi.

Le script est exécuté dès le chargement de la page html car il s'agit de la page d'accueil.
Avec le code que tu donnes, je ne comprends pas quand tes fonctions sont appelées mais bon ..

J'ai pas testé, mais en solution un peu barbare sans trop réfléchir... je verrais bien une solution du type : 

function my_trima()
{
document.getElementById('my_trima').style.display = 'block';
document.getElementById('my_catam').style.display = 'none';
document.getElementById('sy_trima').style.display = 'none';
document.getElementById('sy_catam').style.display = 'none';
}

function my_catam()
{
document.getElementById('my_trima').style.display = 'none';
document.getElementById('my_catam').style.display = 'block';
document.getElementById('sy_trima').style.display = 'none';
document.getElementById('sy_catam').style.display = 'none';
}

function sy_trima()
{
document.getElementById('my_trima').style.display = 'none';
document.getElementById('my_catam').style.display = 'none';
document.getElementById('sy_trima').style.display = 'block';
document.getElementById('sy_catam').style.display = 'none';
}

function sy_catam()
{
document.getElementById('my_trima').style.display = 'none';
document.getElementById('my_catam').style.display = 'none';
document.getElementById('sy_trima').style.display = 'none';
document.getElementById('sy_catam').style.display = 'block';
}
Bonjour merci pour ton aide. Je viens d'essayer ton code, c'est déjà nettement mieux.
Les div sont bien remplacées comme il faut. Bon si je veux etre pointilleux le hic c'est qu'on ne peut pas les faire disparaitre une fois affichées.
Salut,

je pense qu'un peu de lecture te ferais du bien. Car le code pompé n'apporte rien.

Il existe de multiples références pour apprendre les base de javascript, surtout qu'en cherchant sur google, plusieurs cas sont exposés.
Bonjour, la majorité du code javascript y compris le javascript est pompé mais je n'ai pas le choix. N'ayant aucunes bases en javascript et ne connaissant que le html et css il m'est impossible de faire autrement vu que c'est le but de mon stage de créer le site de l'entreprise.
J'ai beau avoir chercher partout sur internet et je n'ai trouvé aucunes réponses.
C'est bien pour cela que je demande votre aide.
J'ai n'ai malheureusement pas le temps d'apprendre le javascript en ce moment.

Si quelqu'un est assez calé pour m'aider.

Actuellement mon menu permet d'afficher les div avec les sous catégories mais ne permet pas de les faire disparaitre.

Voila

Merci

Cordialement
Thomas
Bonjour toto2012,

Une librairie JS de type jQuery ou MooTools ne serait-elle pas plus adaptée ?
Avez-vous la possibilité d'en exploiter une, et est-ce que vous vous sentez capable d'aborder ces outils ?

Elles vous apporteraient une très grande souplesse de travail, une compatibilité,
et vous auriez accès à des ressources (même en français) qui abordent déjà votre cas d'école (et beaucoup d'autres).
Bonjour, j'utilise déjà une librairie jquery.
Je l'utilise pour faire fonctionner mon slider.
Modifié par toto2012 (28 Feb 2014 - 13:03)
Et bien que du bonheur pour vous toto2012 !

Vous pouvez jouer avec la fonction .toggle() de jQuery (voir http://api.jquery.com/toggle/). Cette fonction fait le switch entre .hide() et .show()

Je m'excuse par avance du code que je vais présenter ci-après : ce n'est pas du tout un exemple de bonne pratique. C'est un code pragmatique et moche, mais fonctionnel et adapté à votre contexte :
function toggleShow(id) {
    jQuery('#' + id).toggle(); // Fait apparaître ou disparaître l'item
}

function my_trima() {
    toggleShow('my_trima');
}
			
function my_catam() {
    toggleShow('my_catam');
}
			
function sy_trima() {
    toggleShow('sy_trima');
}
			
function sy_catam() {
    toggleShow('sy_catam');
}

// Tests avec votre code HTML fourni
my_catam(); // 1er appel : fait apparaître la div #my_catam

sy_trima(); // 1er appel : fait apparaître la div #sy_trima
sy_trima(); // 2nd appel : fait disparaître la div #sy_trima

Vous avez à disposition une page test en ligne http://codepen.io/guiwint/pen/ozwuL.
Logiquement, vous avez suffisamment de matière à disposition pour vous en sortir maintenant.

À vous de modifier le code et de jouer avec les fonctions .hide() et .show() si nécessaire pour, par exemple, faire disparaître tous les items avant d'en ouvrir un autre.

Bon courage, bonnes recherches et bon code...
Modifié par Guiwint (28 Feb 2014 - 14:56)
Bonjour, merci de bien vouloir m'aider. Cependant j'ai vraiment beaucoup de mal avec le javascript. Même avec ton code pourtant bien expliquer je n'ai pas réussi à le faire fonctionner.

Je crois que je vais arrêter de faire perdre leur temps aux personnes sur le forum qui pourraient en aider d'autres que moi.

Merci quand même pour tout.
Bonjour toto2012 et merci,

Si vous ne connaissez que très peu le JavaScript, les difficultés que vous rencontrez sont tout à fait justifiables.

La courbe d'apprentissage des bases de jQuery reste très raisonnable (de l'ordre de quelques jours).
Un ptit bouquin sur jQuery serait un bon compagnon de route (et un très bon investissement)...

Bon courage et bon code...
Sujet clos
Aller à