Ich habe eine einfache Auswahl Dropdown, wenn ich eine Option auswählen wird, ist Menü Navigation Element, so dass jetzt, wenn ich schweben auf Menüelemente Navigation wird zurück zur Auswahl Option Liste, die geöffnet ist. Es passiert in allen Browsern. Ich weiß nicht, ob es ein Käfer ist oder was. Die Schritte sind:
Ich habe versucht, den Z-Index mit Positionen zu versehen. Aber nichts funktioniert. Ich denke, es ist kein Problem, aber brauchen eine Erklärung dazu. Irgendwelche Vorschläge werden sehr geschätzt.
Dies ist der Beispielcode:
%Vor% Das <select> Element ist ein interaktiver Inhalt -Element in HTML5 und ein Menü in HTML4.01. Als solches ist es ein Objekt, das Benutzereingaben erfordert und sich wie ein Rechtsklick-Kontextmenü verhält und über alle Dokumentelemente gerendert wird, wenn es aktiv ist. Probieren Sie es selbst aus - öffnen Sie Ihr Kontextmenü und bewegen Sie den Mauszeiger über die Navigation.
Dieser Bug ist mit dem Verhalten anderer interaktiver Inhaltselemente wie video verbunden (siehe auch HTML5-Rendering ).
Die einzige Möglichkeit, ein solches Verhalten zu verhindern, besteht darin, die Anzeigeeigenschaft einer aktiven Auswahl in none zu ändern, während ein interaktives Element in der Schwebe gehalten wird. visibility:hidden; wird nicht helfen, da die Optionen weiterhin angezeigt werden, und die Verwendung von display:none; für Optionen führt zu Rendering-Fehlern.
Hier ist eine kleine Demonstration der oben beschriebenen Technik:
%Vor%Setzen Sie Ihren z-Index auf -1, damit er unten erscheint. Also haben Sie für Ihr select-Element einen Inline-Stil, der den Z-Index auf 1 setzt. Ändern Sie ihn in die negative 1.
%Vor%Ich habe das in IE8 versucht und es hat funktioniert. Das Auswahl-Drop-down-Menü befand sich hinter den Menüoptionen.
für diejenigen, die das gleiche Problem haben, ist es sehr einfach, fügen Sie den Code unten unter Ihrem Code-Menü, dies funktionierte für alle Navigatoren.
%Vor%
Andere Lösung, überprüfen Sie, ob es eine Auswahl im Formular gibt und konzentrieren Sie sich auf das erste Element im Formular, anstatt ein verstecktes Feld zu erstellen.
%Vor% Die Verwendung von display: none führt dazu, dass das Drop-Down-Fenster seinen Fokus verliert, wenn es - zumindest in Chrome, nicht in Firefox - vorhanden ist. Dies kann zu Problemen führen, wenn anstelle des <select> ein Inhalt angezeigt werden soll, wenn das Dropdown-Menü verwendet wird (Optionen durch ein benutzerdefiniertes HTML ersetzen).
Die Verwendung von position: relative; z-index: -1 kann ebenfalls zu Problemen führen: Da <select> hinter der Standardebene verschwindet, kann es unmöglich werden, auf das Dropdown-Menü zu klicken. Außerdem kann das "Fokus" -Ereignis ausgelöst werden, nachdem die Optionen gerendert wurden. Das Ändern des Z-Index über JavaScript funktioniert möglicherweise nicht wie gewünscht.
Ich habe die Lösung gefunden, um das Drop-down-Fenster bei "Fokus" aus dem Blick zu nehmen und es wieder auf "Unschärfe" zu setzen:
%Vor% Im Vergleich zu display: none behält diese Lösung auch das Layout intakt (mit der Ausnahme, dass das Dropdown-Feld nicht mehr angezeigt wird), da das Dropdown-Feld die Höhe des übergeordneten Blockelements definieren kann.
Wie Zeta gesagt hat, ist die Auswahlbox ein interaktives Element, Sie können nichts darüber hinaus mit HTML / CSS anzeigen. Sie können es also nur ausblenden, wenn Sie Ihr Menü anzeigen oder einfach auf blur any focus ed wählt auf der Seite aus.
Wenn Sie keine zusätzlichen CSS-Klassen hinzufügen möchten, können Sie einfach blur() entweder am Anfang Ihrer ShowItem -Funktion eingeben:
... oder allgemeiner (für andere Leser, die sich nicht in Ihrer spezifischen Situation befinden) in einem hover oder mouseenter Ereignis-Callback für die Menüpunkte, die das Aussehen des Untermenüs auslösen.