Positionner l'étiquette sur sélectionner et ouvrir sélectionner sur cliquer

Question

J'essaie de créer un effet déroulant identique à celui montré dans GMail. Lorsque vous cliquez sur une étiquette, une liste déroulante doit s'ouvrir et l'utilisateur doit pouvoir sélectionner des valeurs.

Je pense qu'il peut être possible en alignant un label/div sur le select de sorte que seul l'autorisation de la sélection est visible et quand un utilisateur clique sur l'étiquette ou la flèche, la liste déroulante devrait s'ouvrir. De plus, la valeur de l'étiquette ne doit pas être visible dans la liste déroulante.

Toute aide via CSS ou JavaScript?

Answer 1

La technique spécifiée ci-dessus sera très difficile à obtenir et ne fonctionnera pas dans les anciennes versions d'IE. Les anciennes versions de IE affichent les boîtes de sélection au-dessus de tout le reste, et sont une bonne peine à réparer.

Il est préférable d'utiliser une liste déroulante personnalisée, dont beaucoup sont écrites en jQuery.

Alternativement, tout ce dont vous avez vraiment besoin pour répliquer la fonctionnalité gMail, c'est quelques lignes de javascript pour masquer et afficher une div.

Answer 2

Vous avez juste besoin de montrer et cacher divs, jetez un oeil à ce

http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

Answer 3

Sur clic vous souhaitez afficher la boîte de sélection.

Voir cet exemple de Jquery.

http://api.jquery.com/show/

simple. Les fonctions .show() et .hide() sont présentes.

Si vous souhaitez utiliser css

utilisation .add() ou addClass et css removeClass.

référez-vous au lien ci-dessus.

Answer 4

Je pensais que le gestionnaire jquery .click() pouvait aider, mais NON! : (((

Je trouve la seule façon.

<style> 
    div {display:inline-block; position:relative;} 
    div select {position: absolute; left:0px; top:0px; width:100%; height:100%; opacity:0; cursor:pointer;} 
</style> 
<div> 
    label text here 
    <select> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    </select> 
</div> 

Résultat - vous cliquez sur une étiquette et Standart boîte de sélection ouvre, et JS du tout;)