Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > HTML-Tutorial > Es ist derzeit eine bessere Möglichkeit, bei der Produktion von selected/focused_HTML/Xhtml_Webseiten alle Optionen aufzulisten

Es ist derzeit eine bessere Möglichkeit, bei der Produktion von selected/focused_HTML/Xhtml_Webseiten alle Optionen aufzulisten

WBOY
Freigeben： 2016-05-16 16:39:36
Original
1394 Leute haben es durchsucht

Während der Entwicklung bin ich auf eine solche Nachfragesituation gestoßen, daher habe ich sie zur späteren Bezugnahme aufgezeichnet

Anforderungshintergrund

Verwenden Sie die Tastenkombination auf der Seite, um die Zahlungsmethode zu finden Klicken Sie auf das Auswahlfeld (eine Dropdown-Liste) und treffen Sie eine Auswahl.

Technische Schwierigkeiten

Derzeit unterstützen Browser nicht die Positionierung der Dropdown-Liste durch Code, um alle Optionen darunter aufzulisten. Sie kann nur mit der Maus angeklickt werden .

Nachdem ich im Internet nach Informationen gesucht habe, habe ich einen besseren Weg gefunden, damit umzugehen.

Verwenden Sie das Größenattribut von select und das Positionsattribut des Box-Layouts, um es zu implementieren . Der spezifische Code lautet wie folgt:

Code kopieren
Der Code lautet wie folgt:

Zahlungsmethode:
> nicht kompatibel :relative;padding:1px;">



Die Methoden zum Erweitern und Aufheben der Erweiterung sind beide einfach:




Kopieren Sie den Code


Der Code lautet wie folgt:
function expand(obj){ $(obj).attr("size","10"); >} function unexpand(obj){ $(obj ).attr("size","1");
}

Setzen Sie die Position von select auf absolut damit es das Flusslayout von dom nicht beeinträchtigt. Setzen Sie dann die Position seines Containers auf relativ, sodass die Auswahl entsprechend ihrem Container positioniert wird.

Hier ist zu beachten, dass div als Auswahlcontainer im Tabellenelement verwendet werden muss, da gemäß dem CSS-Standard von w3c die Einstellung von position:relative für tabellenbezogene Elemente undefiniert ist Wählen Sie ein Element unter ff aus und positionieren Sie es direkt basierend auf dem Körperelement.

Referenzinformationen:

http://www.php-insite.com/autoexpand_select.html Sehen Sie sich den Quellcode der Seite direkt an
http://bbs.csdn.net/topics /330158935 Achten Sie auf die Antwort von lingshuo1993
Verwandte Etiketten：
select 聚焦 选中
Quelle：php.cn
Vorheriger Artikel：Vergleichende Einführung in ein Tag-Href-Attribut und die Produktion von OnClick-Events_HTML/Xhtml_Webseiten Nächster Artikel：Fragen zu benutzerdefinierten Attributen der HTML-Tags_HTML/Xhtml_Webseitenproduktion
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
SQL Count() erfordert ebenfalls 0 Ich habe nur eine Tabelle und möchte jeden Eintrag eines Tags zählen, der mit 0 beginnt. J...
Aus 2024-04-06 19:48:53
0
1
449
SQL Groupby funktioniert nicht, ich möchte nach Code_Branch gruppieren ->select('a.statusasstatus','b.nameascustomer_name','e.nameasbranch_name','c.nameas...
Aus 2024-04-06 19:24:49
0
2
488
Beim Versuch, die neueste Version eines Pakets von search.maven.org abzurufen, ist ein Fehler aufgetreten „Fehler: Es konnten keine Daten aus dem Maven-Repository abgerufen werden“ beim Abrufen de...
Aus 2024-04-05 12:11:23
0
1
1471
Ändern Sie den matSelect-Stil, wenn Optionen angezeigt werden Wie ändere ich die Eigenschaften von mat-select, wenn die Option aktiviert ist? <mat-se...
Aus 2024-04-05 09:23:19
0
1
1374
Echo innerhalb von Div mit verschachteltem Echo Ich versuche echo<?phprequire'connect.php';$query=mysqli_query($conn,"SELECT*FROM`...
Aus 2024-04-04 11:09:23
0
1
390
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage