Comment faire apparaitre un menu quand je clique sur un carré?

Signaler
-
Messages postés
30996
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 janvier 2021
-
Salut à tous. J'ai deux div: le premier contient 3 carrés and la deuxième une liste. À coté de chaque carré, il y a un menu (Home, about, contact). Je veux faire apparaitre un menu quand je clique sur le carré qui lui correspond, comment faire ça dans javascript?





<div class="ss">
<div class="s">
</div>

<div class="s">
</div>

<div class="s">
</div>

</div>

<div class="nav">
<ul>
<li>Home</li>
<li>About</li>

<li>Contact</li>
</ul>
</div>

2 réponses

Messages postés
30996
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 janvier 2021
3 171
Bonjour

Il faut jouer avec le style display pour afficher ou masquer des éléments en javascript.
https://www.w3schools.com/jsref/prop_style_display.asp

Et pour détecter le clic, il faut attacher l'événement cliquer sur tes carrés.
https://www.w3schools.com/jsref/event_onclick.asp
Messages postés
20
Date d'inscription
mercredi 14 novembre 2012
Statut
Membre
Dernière intervention
10 janvier 2021

Merci Jordan. J'ai fait cela, mais je ne sais pas comment aller chercher les éléments à l'intérieur de chaque div. Je vous montre ce que j'ai fait, je ne sais pas si c'est correct:



<script>

var mesDiv = document.getElementsByClassName("ss").getElementsByClassName("s");

mesDiv.addEventListener("click", montrer);


var maListe = document.getElementsByClassName("nav").getElementsByTagName("LI");

var liste = "";
for(var i=0; i<maListe.length; i++){
liste+=maListe[i];
}

function montrer(){
liste.style.display = "block";
}
</script>
Messages postés
20
Date d'inscription
mercredi 14 novembre 2012
Statut
Membre
Dernière intervention
10 janvier 2021

Pouvez-vous répondre avec un exemple, s'il vous plait?
Messages postés
30996
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 janvier 2021
3 171 >
Messages postés
20
Date d'inscription
mercredi 14 novembre 2012
Statut
Membre
Dernière intervention
10 janvier 2021

Déjà... tu ne peux pas enchainer les instructions comme tu le fais en "pure" javascript...
Ensuite, document.getElementsByClassName retourne un array.... sur lequel il faut boucler..

Ensuite, je ne comprends pas ce que tu essaies de faire...

tu as plusieurs <div class="ss"> sur ta page ?
Le click sur une <div class="s"> doit déclencher la fonction montrer ... et donc ... afficher tous les li de ta page ? (n'importe lesquels ?? )

Il serait bien de nous montrer le code complet de ta page html et nous expliquer en détail ce qui doit être affiché en cliquant sur quel élément précisément...