Passer un bloc en display none au clic en dehors du bloc

**boteha** · 28/03/2021, 23h08

Bonjour,

J'ai un menu déroulant qui apparaît au survol de son titre, cela en css, un classique.

Voir le codepen.

Sur iPhone il est impossible de refermer le menu, la seule solution est de recharger la page.

Sur Androïd, il suffit de retoucher "table d'orientation" ou de toucher n'importe quelle partie de la page en dehors du menu pour faire disparaître le menu.

Sur grand écran il suffit bien sûr de déplacer le pointeur en dehors du menu pour qu'il disparaisse.

Voyez-vous un moyen d'aider un peu les iPhone ?

En css cela me semble impossible.

On peut penser à un petit javascript qui demanderait de fermer table.ore pour tout contact en dehors du block.

Si vous pouvez me donner les bases du code...

Merci d'avance.

**boteha** · 30/03/2021, 19h21

Bonjour,

Mon codepen a évolué, je gère désormais l'afficher-masquer du menu par clic sur le bouton.

Par contre j'ai un problème pour retrouver ensuite le fonctionnement en css par hover.

J'ai essayé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
tableau.addEventListener ('MouseOut', function ()
{
tableau.style.display = 'none';
}
);

Mais cela ne donne aucun résultat.

Voyez-vous où est l'erreur ?

Mon idée :

On ouvre le menu par hover (css) ou click (javascript).

On ferme le menu par click (javascript) ou sortie de pointeur du tableau (d'où le code ci-dessus mais qui ne marche pas).

Une fois le menu fermé par javascript il doit pouvoir être réouvert par hover (css) comme au chargement de la page. Actuellement si j'ai ouvert par click je dois fermer par click et ensuite le css hover ne fonctionne plus.

J'espère que c'est clair.

**NoSmoking** · 01/04/2021, 08h26

Bonjour,
je n'adopterais pas cette stratégie et je passerais par l'« add/remove » d'une classe.

Par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
const bouton = document.querySelector("div.tab > button");
const tableau = document.querySelector("table.ore");
/*
bouton.addEventListener("click", function () {
  if (tableau.style.display == "none") tableau.style.display = "block";
  else tableau.style.display = "none";
});
tableau.addEventListener("MouseOut", function () {
  tableau.style.display = "none";
});
/*--*/
bouton.addEventListener("mouseover", function() {
  tableau.classList.add("open");
});
bouton.addEventListener("click", function(e) {
  e.stopPropagation();   // il ne faut pas que cela arrive au document, voir plus loin
  if (tableau.classList.contains("open")) {
    tableau.classList.remove("open");
  }
  else {
    tableau.classList.add("open");
  }
});
// Attention mouseleave et pas mouseout
tableau.addEventListener("mouseleave", function() {
  tableau.classList.remove("open");
});
document.body.addEventListener("click", function() {
  tableau.classList.remove("open");
});

**boteha** · 01/04/2021, 10h48

Bonjour NoSmoking,

Merci pour ce code, je le teste pendant le week-end au plus tard mais je suis déjà sûr que c'est la bonne approche.

Je vous tiens informés.

**boteha** · 01/04/2021, 22h02

Bonjour NoSmoking,

Sur le codepen il me semble que ton code fait exactement ce qui est demandé.

Sauf la dernière instruction, le clic dans body ne masque pas le menu.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
document.body.addEventListener("click", function() {
  tableau.classList.remove("open");
});

Tu survoles ou cliques sur le bouton, tu sors par la droite de façon à ne pas provoquer mouseleave sur le tableau, tu cliques dans le body et il ne se passe rien.
Bug du codepen ou défaut du code ?