Fermer un menu ''Dropdown''

**ProgElecT** · 27/05/2017, 17h33

Salut

Je cherche à faire disparaitre l'affichage d'un menu Dropdown suite à un clique sur l'un de ces intitulés.

Code html :

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<title>Bouton avec menu Dropdown()</title>
	</head> 
<style>
.dropbtn {
    background-color: Navy; /* bleu trés foncé */
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
 
.dropdown {
    position: relative;
    display: inline-block;
}
 
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
 
.dropdown-content a {
    color: black;
    padding: 2px 5px;
    text-decoration: none;
    display: block;
    cursor: pointer;
}
 
.dropdown:hover .dropbtn { /* bleu plus clair au passage de la souris*/
    background-color: SteelBlue; 
}
 
.dropdown-content a:hover {background-color: #f1f1f1} /* gris légé au passage de la souris*/
 
.dropdown:hover .dropdown-content {
    display: block;
}
</style>
</head>
<script>
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function recupeinf(conteneur,formule){
        //document.getElementById(conteneur).style.display = 'none';
        //document.getElementById(conteneur).style. visibility = 'hidden';
        document.getElementById('textentrer').value = formule;
        //document.getElementById(conteneur).style.display = 'block';
        //document.getElementById(conteneur).style. visibility = 'visible';
        document.getElementById('textentrer').focus();
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
        </script>
<body>
 
<h2>Menu déroulant</h2>
<p>Déplacez la souris sur le bouton pour ouvrir le menu déroulant.</p>
 
<div class="dropdown">
  <button class="dropbtn">Case 1 menu déroulant</button>
  <div id="d1" class="dropdown-content">
    <a onmouseup="recupeinf('d1','bouton 1, ligne n°1 cliquée')">Ligne 1</a>
    <a onmouseup="recupeinf('d1','bouton 1, ligne n°2 cliquée')">Ligne 2</a>
    <a onmouseup="recupeinf('d1','bouton 1, ligne n°3 cliquée')">Ligne 3</a>
    <a onmouseup="recupeinf('d1','bouton 1, ligne n°4 cliquée')">Ligne 4</a>
    <a onmouseup="recupeinf('d1','bouton 1, ligne n°5 cliquée')">Ligne 5</a>
    <a onmouseup="recupeinf('d1','bouton 1, ligne n°6 cliquée')">Ligne 6</a>
  </div>
</div>
<div class="dropdown">
  <button class="dropbtn">Case 2 menu déroulant</button>
  <div id="d2" class="dropdown-content">
    <a onmouseup="recupeinf('d2','bouton 2, ligne n°1 cliquée')">Ligne 1</a>
    <a onmouseup="recupeinf('d2','bouton 2, ligne n°2 cliquée')">Ligne 2</a>
    <a onmouseup="recupeinf('d2','bouton 2, ligne n°3 cliquée')">Ligne 3</a>
  </div>
</div>
<br><br>
<input type="text" id="textentrer" style="width:300px">
 
</body>
</html>

Mes essais lignes 52 à 59 (function recupeinf)
Sur le mouse Up d'un des intitulés, je rempli l'input textentrer avec le deuxième paramètres, je souhaite que le menu des intitulés se ferme, laissant voir l'input.
Si je libère la ligne 53, document.getElementById(conteneur).style.display = 'none'; le menu se ferme, mais ..... lors d'un nouveau passage sur le titre du menu,
ben le menu ne s'affiche plus

Même problème si je choisi de libérer la ligne 54 document.getElementById(conteneur).style. visibility = 'hidden';.

l'input textentrer, dans le programme visé, sera rempli (insertion, cela je sais faire) avec plusieurs intitulés dans une logique choisi par l'utilisateur.
Une première version, qui fonctionne, est à base de <select .....> <option .....></select>, mais cela n'est pas très esthétique, lisible, c'est pourquoi je me tourne vers un menu barre Dropdown.

Comme vous l'aurez compris, je débute en JavaScript et CSS.

Merci de vos informations.

**ProgElecT** · 27/05/2017, 18h38

Re

La honte

En général je post une discussion qu'après de multiples essais, au bout de plusieurs jours de recherche dans mon coin, c'est encore le cas aujourd’hui.
La règle pour moi se confirme, question posée, question devenue inutile, car je trouve enfin la/une solution

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
function recupeinf(conteneur,formule){
	document.getElementById(conteneur).style.visibility = 'hidden';
	document.getElementById('textentrer').value = formule;
	document.getElementById('textentrer').focus();
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function affmenu(conteneur){
document.getElementById(conteneur).style.visibility = 'visible';
}

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="dropdown">
  <button class="dropbtn" onmouseover="affmenu('d1')">Case 1 menu déroulant</button>
  <div id="d1" class="dropdown-content">
    <a onmouseup="recupeinf('d1','bouton 1, ligne n°1 cliquée')">Ligne 1</a>
    <a onmouseup="recupeinf('d1','bouton 1, ligne n°2 cliquée')">Ligne 2</a>
    <a onmouseup="recupeinf('d1','bouton 1, ligne n°3 cliquée')">Ligne 3</a>
    <a onmouseup="recupeinf('d1','bouton 1, ligne n°4 cliquée')">Ligne 4</a>
    <a onmouseup="recupeinf('d1','bouton 1, ligne n°5 cliquée')">Ligne 5</a>
    <a onmouseup="recupeinf('d1','bouton 1, ligne n°6 cliquée')">Ligne 6</a>
  </div>
</div>
<div class="dropdown">
  <button class="dropbtn" onmouseover="affmenu('d2')">Case 2 menu déroulant</button>
  <div id="d2" class="dropdown-content">

Fermer un menu ''Dropdown''

JavaScript

Vue hybride

Partager

Partager