Je deviens fou. Sélectionnez la case à l'intérieur d'un menu déroulant div rend mon menu déroulant div disparaît lorsque j'utilise la case à cocher – comment puis-je arrêter cela?

Exemple simple ici: http://jsfiddle.net/ycHgg/1 Essayez ceci dans IE 7, 8 ou 9. Cliquez sur la boîte de sélection dans la division déroulante, puis essayez de sélectionner le numéro "3" – la division déroulante entière disparaîtra . Comment arrête-t-il que cela se produise et que la division déroulante reste ouverte? Message détaillé ci-dessous.

Tout d'abord, cela semble être un problème, je ne peux pas croire que ce soit même un problème. Mais c'est tellement que j'ai essayé de googler pour cela. N'a rien trouvé de façon directe, mais c'est un concept si simple, je ne peux pas croire qu'une réponse ne soit pas là.

Voici donc la situation. J'ai un div et c'est mon menu déroulant. J'ai un onmouseover et onmouseout pour déclencher l'affichage et la dissimulation de cette div. J'ai essayé l'affichage, la visibilité, et maintenant j'utilise le "gauche" pour le positionner -9999px, puis revenir à -5px pour le cacher et le montrer. Tous ces travaux fonctionnent bien, donc il ne semble pas important que je choisis d'utiliser. Cependant, j'ai aussi une boîte de saisie dans cette div. J'ai trouvé que si j'avais utilisé l'affichage: aucun pour cacher le div, en oscillant sur la zone de texte d'entrée, la division entière disparaissait brusquement dans Chrome. L'utilisation de la "gauche" ou de la visibilité ne provoque plus ce problème, donc je suis coincé avec l'utilisation de "gauche"

Maintenant, le problème est le suivant: j'ai un choix dans cette div. Lorsque je clique sur la case à cocher, c'est bien. Parfait. Lorsque je déplace mon pointeur de la souris dans le calque qui montre les éléments de la boîte de sélection, la division entière disparaît avec la sélection, la zone de texte, etc. Poof, tout à coup s'arrête, tout disparaît. Je dois mentionner que ce problème se produit dans IE. Toutes les versions de 7 à 9. Lorsque j'ai essayé de googler pour cela ("la boîte de sélection IE bug menu disparaît"), j'obtiens des résultats sur un problème totalement différent documenté ici:

• JQuery offset (). Top renvoie une mauvaise valeur – erreur avec marge
• JQuery: Trouvez les deux premiers enfants
• Toggle Audio Play-Pause image
• JQuery ajoute à la page JSP
• L'événement de clic jQuery ne fonctionne qu'après avoir déplacé la souris sur Chrome

Http://www.javascriptjunkie.com/?p=5

Ce n'est pas mon problème cependant. Selon cette page, il y a un bug IE6 répandu que certaines boîtes sélectionnées s'affichent à travers les divs qui apparaissent au-dessus d'eux, peu importe quoi. Selon d'autres sources, cela se produit car la boîte de sélection est traitée comme un élément de fenêtrage et apparaîtra sur tout, peu importe quoi (mais cela est corrigé dans IE 7). Et cette page vous explique comment contourner cela. C'est bon mais mon problème est que la boîte de sélection est à l'intérieur du div lui-même, et lorsque vous cliquez sur la case à cocher pour l'utiliser, puis déplacez la souris vers le bas pour sélectionner un élément, il disparaît – div, sélectionnez, zone de texte et tout. Et il se passe sur IE 7 à 9. Encore une fois, le seul javascript utilisé est onmouseout et onmouseover pour positionner le div afin qu'il soit à gauche: -9999px puis à gauche: -5px respectivement pour le cacher et le montrer. Rien de spécial ici, mais cela arrive toujours.

La structure est assez basique:

<a href="#" onmouseover="display('menu');" onmouseout="hide('menu');">Nav Item</a> <div id="menu" onmouseover="display('menu');" onmouseout="hide('menu');"> <form> <fieldset> <label>Hello</label> <select> ... </select> </fieldset> </form> .... </div> 

Les ellipses à l'intérieur de la sélection ne sont que les éléments de l'option de sélection, les points suspensifs en dehors du formulaire sont les autres éléments dans le menu déroulant, composés de différentes divs et ul et tableaux. Tous ont flotté à gauche, je crois. Je ne pense pas que cela affecte ce problème de boîte de sélection. L'ancre cache / montre le div, et le div lui-même a le cache / spectacle aussi (si l'utilisateur déplace la souris à partir de l'intérieur div à l'extérieur du div, il devrait se cacher)

Est-il possible que la boîte de sélection soit toujours un élément à fenêtres et que vous gâchez cela? J'ai lu cela a été corrigé dans IE 7, mais peut-être que pour l'affaire présentée dans cette publication de blog (div est affiché en haut de la sélection) au lieu de si le select est à l'intérieur du div lui-même? Mais le problème est que l'utilisation de la boîte de sélection rend l'ensemble de la division disparaître, donc cela semble différent. Cependant, le choix d'un élément 'fenêtré' me fait penser qu'en mousing dessus, le div pense que la souris est à l'extérieur maintenant, alors il se déplace à gauche: -9999px au lieu de rester ouvert et rester à gauche: -5px. J'ai essayé de chercher d'autres sites qui utilisent un choix dans un menu déroulant div et ne trouvant qu'un exemple, ce qui m'a vraiment surpris. Si vous allez sur http://www.walmart.com et que vous passez sur "Store Finder", vous pouvez voir le menu déroulant div apparaître et le champ Etat est un choix. Cela fonctionne bien, mais ne peut pas comprendre comment ils le font.

Est-ce que quelqu'un sur terre a connu ce problème? Est-ce que quelqu'un peut le recréer eux-mêmes et voir que je ne suis pas fou? J'apprécie vraiment sérieusement l'aide, j'ai frappé la tête contre le mur depuis quelques jours maintenant.

• Changez le lien css et attendez que le nouveau css soit chargé
• En utilisant des valeurs calculées javascript en moins
• Redimensionner dynamiquement la taille de la police pour s'adapter à la taille du conteneur
• Différents fichiers WAR, ressources partagées
• Est-il possible de contenir un contenu rétrécissable en largeur qui s'étend sur plus d'une ligne?

 <div id="wrapper"> <a href="#" >Nav</a> <div id="menu" > <form> <fieldset> <label>hello</label> <select id="optionslist"> <option>1</option> <option>2</option> <option>3</option> </select> </fieldset> </form> </div></div> 

 addBoxEvents(); var activeForm = false; $("optionslist").addEvent('click',function(E){ activeForm = true; }); $("optionslist").addEvent('blur',function(E){ activeForm = false; }); function addBoxEvents(){ $('wrapper').addEvent('mouseout',function(E){ if(!activeForm){ $('menu').setStyle('visibility','hidden'); } }); $('wrapper').addEvent('mouseover',function(E){ $('menu').setStyle('visibility','visible'); }); }