Fermer un menu ''Dropdown''
Salut
Je cherche à faire disparaitre l'affichage d'un menu Dropdown suite à un clique sur l'un de ces intitulés.
Code:
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.