JS implementiert das Anzeigen und Ausblenden von Dropdown-Menüs
Im vorherigen Artikel haben wir Ihnen den Code für JS zum Implementieren des Dropdown-Menüs vorgestellt, damit das Dropdown-Menü angezeigt und ausgeblendet werden kann. Heute stellen wir Ihnen die JS-Implementierung des Anzeigens und Ausblendens vor des Dropdown-Menüs!
In diesem Artikel verwenden wir JavaScript-Skript, um das Dropdown-Menü anzuzeigen und auszublenden. Die Kenntnisse, die wir zur Implementierung mithilfe von JavaScript-Methoden benötigen, sind:
1) JS-Ereignisse: Onmouseover-Mausübergabeereignis und Onmouseout-Mausverlassensereignis.
2) Grundlegende JS-Syntax: Verwenden Sie das Schlüsselwort function, um Funktionen zu definieren.
3) DOM-Programmierung: Methode getElementsByTagName().
Dann ist der nächste Schritt unser Produktionsprozess:
1) Sekundärmenü ausblenden: Stellen Sie den CSS-Stil so ein, dass das Sekundärmenü ausgeblendet wird.
2) Schreiben Sie die Funktion showsub(), um das Untermenü anzuzeigen: Verwenden Sie getElementsByTagName, um die Anzeige des sekundären Menüs über style.display festzulegen.
3) Schreiben Sie die Funktion hidesub(): Verwenden Sie getElementsByTagName, um die sekundären Menüelemente abzurufen; legen Sie fest, dass das sekundäre Menü über style.display ausgeblendet wird.
4) Mausereignisse hinzufügen: Fügen Sie Mausereignisse zum Menü der ersten Ebene mit einem Menü der zweiten Ebene hinzu und rufen Sie die Funktion showsub()/hidesub() auf, um das Ein- und Ausblenden des Menüs der zweiten Ebene zu realisieren, wenn das Die Maus durchläuft das Menü der ersten Ebene.
5) Führen Sie Browserkompatibilitätstests durch, mindestens fünf Browser. IE7,8,9, Firefox, Google, 2345-Browser usw.
Rendering:
HTML-Code:
<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>下拉菜单</title> <!--引入的外部CSS样式文件--> <link rel="stylesheet" type="text/css" href="style.css" /> <!--引入的外部JS脚本文件--> <script type="text/javascript" src="script.js"></script> </head> <body> <p id="nav" class="nav"> <ul> <li><a href="#">网站首页</a></li> <li onmouseover="showsub(this)" onmouseout="hidesub(this)"><a href="#">课程大厅</a> <ul> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">Ajax</a></li> </ul> </li> <li onmouseover="showsub(this)" onmouseout="hidesub(this)"><a href="#">学习中心</a> <ul> <li><a href="#">视频学习</a></li> <li><a href="#">案例学习</a></li> <li><a href="#">交流平台</a></li> </ul> </li> <li><a href="#">经典案例</a></li> <li><a href="#">关于我们</a></li> </ul> </p> </body> </html> </span>
Externes CSS-Stylesheet style.css-Dateicode:
<span style="font-size:18px;">/*CSS全局设置*/
*{
margin:0;
padding:0;
}
.nav{
background-color:#EEEEEE;
height:40px;
width:450px;
margin:0 auto;
}
ul{
list-style:none;
}
ul li{
float:left;
line-height:40px;
text-align:center;
}
a{
text-decoration:none;
color:#000000;
display:block;
width:90px;
height:40px;
}
a:hover{
background-color:#666666;
color:#FFFFFF;
}
ul li ul li{
float:none;
background-color:#EEEEEE;
}
ul li ul{
display:none;
}
/*为了兼容IE7设置的CSS样式，但是又必须写在a:hover前面*/
ul li ul li a:link,ul li ul li a:visited{
background-color:#EEEEEE;
}
ul li ul li a:hover{
background-color:#009933;
}
</span>Externes JS-Skript script.js-Dateicode:
<span style="font-size:18px;">function showsub(li){
var submenu=li.getElementsByTagName("ul")[0];
submenu.style.display="block";
}
function hidesub(li){
var submenu=li.getElementsByTagName("ul")[0];
submenu.style.display="none";
}</span>Zusammenfassung:
Dieser Artikel Anhand von Beispielen habe ich Ihnen erklärt, wie Sie Dropdown-Menüs mit JS anzeigen und ausblenden. Ich glaube, dass Sie alle über ein gewisses Wissen und Verständnis dafür verfügen. Ich hoffe, dass es für Ihre Arbeit hilfreich sein wird.
Verwandte Empfehlungen:
Das obige ist der detaillierte Inhalt vonJS implementiert das Anzeigen und Ausblenden von Dropdown-Menüs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1377
52
Versteckte Einstellungen für das schwebende Fenster der Win11-Eingabemethode
Dec 30, 2023 pm 11:24 PM
Einige Freunde sind nicht an die Floating-Window-Funktion der Win11-Eingabemethode gewöhnt und es fühlt sich immer seltsam an, diese Floating-Window-Funktion zu deaktivieren. Jetzt werde ich Ihnen die korrekte Bedienungsmethode zum Schließen des Floating-Fensters vorstellen Win11-System. Folgen Sie uns. Win11 verbirgt das schwebende Fenster für die Eingabemethode. 1. Öffnen Sie die Einstellungstaste des Computers und wählen Sie dann „Zeit und Sprache“. Klicken Sie nach der Eingabe auf „Enter“. 2. Suchen Sie unter „Erweiterte Tastatureinstellungen“ nach „Eingabemethode wechseln“ und dann „Desktop-Sprache“ ändern Klicken Sie auf das Häkchen vor „Leiste“ und geben Sie dann „Sprachleistenoptionen“ ein. 3. Nach dem Öffnen klicken wir hier auf „Ausblenden“, um das schwebende Sprachfenster zu schließen.
So erstellen Sie ein Dropdown-Menü in der WPS-Tabelle
Mar 21, 2024 pm 01:31 PM
So erstellen Sie das Dropdown-Menü der WPS-Tabelle: Nachdem Sie die Zelle ausgewählt haben, in der Sie das Dropdown-Menü festlegen möchten, klicken Sie nacheinander auf „Daten“ und „Gültigkeit“ und nehmen Sie dann die entsprechenden Einstellungen im Popup-Dialogfeld vor um unsere Speisekarte herunterzuziehen. Als leistungsstarke Office-Software verfügt WPS über die Möglichkeit, Dokumente, statistische Datentabellen usw. zu bearbeiten, was für viele Menschen, die mit Texten, Daten usw. arbeiten müssen, großen Komfort bietet. Um die WPS-Software geschickt nutzen zu können, müssen wir in der Lage sein, verschiedene grundlegende Vorgänge der WPS-Software zu beherrschen. In diesem Artikel erfahren Sie, wie Sie die WPS-Software verwenden. Sie können die Menüvorgänge in der angezeigten WPS-Tabelle nach unten verschieben. Nachdem Sie das WPS-Formular geöffnet haben, wählen Sie zunächst das aus
Wie verstecke ich die Taskleistensymbole von Windows 11?
Jan 06, 2024 am 08:38 AM
Wenn wir im Win11-System die Symbole in der Taskleiste als störend empfinden, können wir sie in der Taskleisten-Ecküberlaufoberfläche ausblenden. Die Symbole in der Taskleiste der unten geöffneten Anwendung können jedoch nicht ausgeblendet werden. Werfen wir einen Blick auf die konkrete Situation. So blenden Sie das Win11-Taskleistensymbol aus: 1. Zentrieren Sie das Symbol. 1. Wenn wir das Symbol in der Taskleiste unten ausblenden möchten, können wir zunächst mit der rechten Maustaste klicken, um es auszuwählen, und auf „Von Taskleiste entfernen“ klicken. 2. Wenn wir jedoch öffnen Diese Anwendung und sind dabei, sie zu verwenden, und das ist unmöglich zu verbergen. 2. Symbol in der unteren rechten Ecke 1. Wenn Sie das Anwendungssymbol in der unteren rechten Ecke ausblenden möchten, öffnen Sie zunächst die Systemeinstellungen. 2. Klicken Sie dann in der linken Seitenleiste auf „Personalisierung“, wie im Bild gezeigt. 3. Klicken Sie dann auf , um die Taskleiste auf der rechten Seite aufzurufen
So verbergen Sie Werke in Douyin-Kurzvideos. So verbergen Sie persönliche Videowerke
Mar 12, 2024 pm 12:49 PM
In der Douyin-Kurzvideo-App-Software stehen viele kurze Videoarbeiten zur Verfügung. Sie können sie nach Belieben ansehen und sie sind alle dauerhaft kostenlos verfügbar Bieten Sie jedem die zufriedenstellendste Art zuzusehen. Geben Sie Ihr Konto ein, um sich online anzumelden, und es werden verschiedene aufregende Kurzvideos gesendet, die genau auf dem basieren, was jeder jeden Tag sieht. Sie können auch den Live-Übertragungsraum betreten, um mit dem Moderator zu interagieren und zu chatten, damit Sie sich wohl fühlen mehr glücklich. Die von Einzelpersonen hochgeladenen Werke können auch ganz einfach mit einem Klick eingerichtet werden. Wischen Sie nach oben und unten, um die Echtzeit-Kommentare unzähliger Internetnutzer anzuzeigen Jetzt hat der Herausgeber detaillierte Online-Douyin-Kurzvideos veröffentlicht. Benutzer drängen auf Möglichkeiten, persönliche Videoarbeiten zu verbergen. Öffnen Sie zunächst das kurze Douyin-Video
Wie kann man WeChat-Freunde verstecken, ohne sie zu blockieren oder zu löschen? So verbergen Sie WeChat-Freunde, ohne sie zu blockieren oder zu löschen
Mar 13, 2024 pm 07:19 PM
Wie kann man WeChat-Freunde verstecken, ohne sie zu blockieren oder zu löschen? Viele Benutzer möchten einige Freunde ausblenden, wissen aber nicht, wie das geht. Auf dieser Website wird den Benutzern sorgfältig erklärt, wie sie WeChat-Freunde ausblenden können, ohne sie zu blockieren oder zu löschen. Methoden zum Ausblenden von WeChat-Freunden ohne Blockieren oder Löschen Methode 1: 1. Öffnen Sie zunächst die WeChat-Software, suchen Sie das Adressbuch auf der WeChat-Seite und klicken Sie auf „Mein“. 2. Dann betreten wir die Einstellungsseite. 3. Suchen Sie die Option „Datenschutz“ und klicken Sie darauf. 4. Klicken Sie dann auf „Nicht sehen lassen“. 5. Gehen Sie zur Seite „Do Not Let Her View“ und klicken Sie auf „+“, um die Freunde zu markieren, die Sie ausblenden möchten.
Mar 18, 2024 pm 03:40 PM
Neben der erstaunlichen Hardware-Ausstattung und den hervorragenden Funktionen verbirgt das Xiaomi Mi 14 auch einen faszinierenden Ort – Smart Island. Hier können Benutzer personalisierte Anpassungen und ein unbegrenztes kreatives Mobiltelefonerlebnis genießen. Aber nicht jedem gefällt diese Funktion. Wie versteckt das Xiaomi Mi 14 Smart Island? Finden wir es gemeinsam heraus. Wie verstecke ich Smart Island auf dem Xiaomi Mi 14? 1. Öffnen Sie die Einstellungsanwendung des Xiaomi 14-Mobiltelefons. 2. Scrollen Sie, um die Option „Funktionen“ zu finden, und klicken Sie zur Eingabe. 3. Suchen Sie auf der Funktionsseite die Option „Smart Island ausblenden“ und aktivieren Sie sie. 4. Nachdem Sie bestätigt haben, dass das Ausblenden des Smart Island aktiviert ist, kehren Sie zum Desktop zurück und Sie werden sehen, dass das Smart Island ausgeblendet wurde.
Ausführliches Tutorial zum Verstecken von Werken auf Douyin
Mar 25, 2024 pm 03:11 PM
1. Klicken Sie zunächst auf [+], um zu schießen. 2. Klicken Sie dann auf das Häkchen in der unteren rechten Ecke, um den Abschluss der Aufnahme zu bestätigen. Klicken Sie auf] Weiter[, 3. Klicken Sie auf [Wer kann sehen]. Wählen Sie einfach [Privat] aus. Szenario 2: Die Arbeit wurde übernommen. 1. Klicken Sie auf [Ich] und wählen Sie [Arbeit]. 2. Klicken Sie rechts auf das [drei Punkte]-Logo. 3. Wischen Sie nach links, um [Berechtigungseinstellungen] zu finden. 4. Klicken Sie auf [Als privat festlegen].
So bereinigen Sie den versteckten Müll auf Ihrem Telefon gründlich (entfernen Sie den Müll vollständig aus dem Speicher Ihres Telefons)
Jun 01, 2024 am 09:29 AM
Mobiltelefone sind durch die kontinuierliche Weiterentwicklung der Technologie und die Beliebtheit von Smartphones zu einem unverzichtbaren Bestandteil unseres täglichen Lebens geworden. Diese Junk-Dateien nehmen wertvollen Speicherplatz in Anspruch, und im Laufe der Zeit sammelt sich eine große Menge versteckter Junk-Dateien auf dem Telefon an, was jedoch zu einer Verschlechterung der Leistung des Telefons führt. Zu wissen, wie man versteckten Müll auf seinem Telefon gründlich bereinigt, ist für jeden Mobiltelefonbenutzer zu einem unverzichtbaren Wissen geworden. 1. Unnötige Anwendungs-Caches finden und löschen. 2. Anwendungen löschen, die nicht mehr verwendet werden. 3. Foto- und Video-Cache bereinigen. 4. Temporäre Dateien und Download-Ordner vollständig bereinigen. 5. Kontakt- und SMS-Datensätze organisieren und bereinigen. 6. System-Cache bereinigen. 7. Deinstallieren Sie nutzlose Systemanwendungen. 8. Bereinigen Sie den Browser-Cache und -Verlauf. 9. Löschen Sie ungültige Musik- und Audiodateien. 10. Optimieren Sie das Dateisystem Ihres Mobiltelefons
