js implementiert benutzerdefinierte Dropdown-Box
|
In diesem Artikelbeispiel wird der spezifische JS-Code zur Implementierung eines benutzerdefinierten Dropdown-Felds zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt Umsetzungsideen: (1) Erstellen Sie eine Liste und ein Span-Tag (jedes beliebige Tag ist geeignet). (2) Binden Sie an jedes Element in der Liste ein Klickereignis. Wenn Sie auf ein Element klicken, ändert sich der Span-Inhalt in den Inhalt dieses Elements und blendet dann die Liste aus. (3) Um die Liste zunächst auszublenden, klicken Sie auf das Span-Tag, um es anzuzeigen. Wenn nichts ausgewählt ist, klicken Sie auf Dokument, um die Liste auszublenden. (4) Jede Taste auf der Tastatur hat ihren eigenen Tastencode. Anhand dieses Tastencodes lässt sich bestimmen, welche Taste gedrückt werden muss, um die entsprechende Operation auszuführen. Die folgende Funktion kann den Tastencode der Tastatur ermitteln.
Dokument.addEventListener("keyup",Funktion(e){
console.log(e.Schlüsselcode)
})Kerncode: Inhalt, der durch die Auf-, Ab- und Eingabetasten auf der Tastatur ausgelöst wird
//Tastaturdruckereignis document.addEventListener("keyup",function(e){
var e=e||Fenster.e;
zurücksetzen()
//Aufwärtstaste if(e.keyCode=="38"){
Index--;
wenn(index<0){
index=Liste.Länge-1
}
}
//Taste runterif(e.keyCode=="40"){
Index++;
wenn(index>list.length-1){
Index = 0
}
}
//Bestätigungsschlüssel eingebenif(e.keyCode=="13"){
cite.innerHTML=list[index].innerHTML;
ul.style.display="keine";
zurückkehren ;
}
Liste[index].klassenName="bg";
})Vollständiger Code:
<!doctype html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Dropdown-Menü</title>
<style type="text/css">
Körper,
ul,
li {
Rand: 0;
Polsterung: 0;
Schriftgröße: 13px;
}
ul,
li {
Listenstil: keiner;
}
.divselect {
Breite: 186px;
Rand: 80px automatisch;
Position: relativ;
Z-Index: 10000;
}
.divselect zitieren {
Breite: 150px;
Höhe: 24px;
Zeilenhöhe: 24px;
Anzeige: Block;
Farbe: #807a62;
Cursor: Zeiger;
Schriftstil: normal;
Polsterung links: 4px;
Polsterung rechts: 30px;
Rand: 1px durchgezogen #333333;
}
.divselect ul {
Breite: 184px;
Rand: 1px durchgezogen #333333;
Hintergrundfarbe: #ffffff;
Position: absolut;
Z-Index: 20000;
Rand oben: -1px;
Anzeige: keine;
}
.divselect ul li {
Höhe: 24px;
Zeilenhöhe: 24px;
}
.divselect ul li a {
Anzeige: Block;
Höhe: 24px;
Farbe: #333333;
Textdekoration: keine;
Polsterung links: 10px;
Polsterung rechts: 10px;
}
.divselect ul li:hover{
Hintergrund: #eee;
}
.bg{
Hintergrund: #eee;
}
</Stil>
</Kopf>
<Text>
<div Klasse="divselect">
<span>Bitte klicken Sie, um eine Kategorie auszuwählen</span>
<ul>
<li>
<a href="javascript:;">ASP-Entwicklung</a>
</li>
<li>
<a href="javascript:;">.NET-Entwicklung</a>
</li>
<li>
<a href="javascript:;">PHP-Entwicklung</a>
</li>
<li>
<a href="javascript:;">Javascript-Entwicklung</a>
</li>
<li>
<a href="javascript:;">Java-Effekte</a>
</li>
</ul>
</div>
<Skripttyp="text/javascript">
var cite = document.querySelector ("span"), //Ausgewählter Inhalt ul = document.querySelector ("ul"), //Liste list = document.querySelectorAll ("a"), //Ausgewähltes Element index = -1; //Index //Klicken Sie auf die Liste, um sie anzuzeigen cite.addEventListener ("click", function (e) {
var e=e||Fenster.e;
e.stopPropagation(); //Stoppt das Sprudeln, um das Auslösen versteckter, an das Dokument gebundener Ereignisse zu verhindern ul.style.display="block";
})
//Klick an jedes Listenelement binden for(var i=0;i<list.length;i++){
Liste[i].onclick=Funktion(){
zitieren.innerHTML=dieses.innerHTML;
ul.style.display="none"; //Sie müssen hier nicht „hide“ schreiben. Wenn Sie „hide“ nicht schreiben, wird es in das Dokument eingeblendet und löst das Hide-Ereignis im Dokument aus}
}
//Tastaturdruckereignis document.addEventListener("keyup",function(e){
var e=e||Fenster.e;
zurücksetzen()
//Aufwärtstaste if(e.keyCode=="38"){
Index--;
wenn(index<0){
index=Liste.Länge-1
}
}
//Taste nach untenif(e.keyCode=="40"){
Index++;
wenn(index>list.length-1){
Index = 0
}
}
//Bestätigungsschlüssel eingebenif(e.keyCode=="13"){
cite.innerHTML=list[index].innerHTML;
ul.style.display="keine";
zurückkehren ;
}
Liste[index].klassenName="bg";
})
//Klicken Sie auf das Dokument, um es auszublenden, wenn es nicht ausgewählt ist. document.addEventListener("click",function(){
ul.style.display="keine";
})
//Stil zurücksetzen Funktion reset(){
für(var i=0;i<Liste.Länge;i++){
Liste[i].Klassenname="";
}
}
</Skript>
</body>
</html>Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Erste Schritte mit MySQL Sharding
>>: IE8 Beta 1 hat zwei Bereiche, die Ihre Aufmerksamkeit erfordern
Artikel empfehlen
So verwenden Sie das Marquee-Tag im XHTML-Code
Im Forum habe ich gesehen, dass der Internetnutzer...
Eine detaillierte Einführung in die Betriebssystemebenen von Linux
Inhaltsverzeichnis 1. Einführung in die Linux-Sys...
react+antd.3x implementiert IP-Eingabefeld
In diesem Artikel wird der spezifische Code von r...
Miniprogramme ermöglichen die Auswahl von Produktattributen oder Spezifikationen
In diesem Artikel wird der spezifische Code zur I...
Anwendung von Ankerpunkten in HTML
Ankerpunkt festlegen <a name="nach oben&qu...
Zusammenfassung der mit dem Abfangen von MySQL-Zeichenfolgen verbundenen Funktionen
In diesem Artikel werden MySQL-Funktionen zum Abf...
Vue-Formulareingabebindung V-Modell
Inhaltsverzeichnis 1.v-Modell 2. Bindungseigensch...
Eine kurze Diskussion zur Front-End-Produktion: Ist IE6 aus Kompatibilitätsgründen noch erforderlich?
Auf dem heimischen Markt besteht noch immer ein g...
Lösen Sie schnell das Problem des langsamen Starts nach der Tomcat-Neukonfiguration
Während der Konfiguration des Jenkins+Tomcat-Serv...
Detaillierte Erläuterung zur Lösung des Konflikts von Projekt-URLs, der durch das Festlegen des Standardpfads von Tomcat verursacht wird
Vorwort Tomcat ist ein hervorragender Java-Contai...
Grundlegendes zum MySQL-Abfrageoptimierungsprozess
Inhaltsverzeichnis Parser und Präprozessoren Abfr...
Eine kurze Diskussion über die Ungültigkeitserklärung oder implizite Konvertierung von MySQL-Integer- und String-Indizes
Inhaltsverzeichnis Problemübersicht Reproduktion ...
Natives JS implementiert regelmäßige Validierung des Formulars (Senden erst nach Validierung)
Folgende Funktionen sind implementiert: 1. Benutz...
Fügen Sie dem Debian-Docker-Container geplante Crontab-Aufgaben hinzu
Mittlerweile basieren die meisten Docker-Images a...
Schritte zum Upgrade von CentOS6 auf Glibc
Inhaltsverzeichnis Hintergrund Kompilieren Sie gl...