Ändern Sie das Dropdown-Menü in Bootstrap, um es direkt beim Bewegen der Maus anzuzeigen. [Original]_Javascript-Fähigkeiten

Vor Kurzem verwendete mein Unternehmen die Menüfunktion von Bootstrap beim Erstellen von Webseiten. Es wollte das sekundäre Menü anzeigen, wenn man mit der Maus darüber fährt, also habe ich etwas recherchiert und herausgefunden, dass es wahrscheinlich zwei Methoden gibt.

Die erste Methode: Ändern Sie das Stylesheet

Tatsächlich ist es relativ einfach, ein CSS hinzuzufügen, um den Hover-Status festzulegen und das Dropdown-Menü auf „Blockieren“ zu setzen:

Code kopieren Der Code lautet wie folgt:

.nav > li:hover .dropdown-menu {display: block;}

Dieses CSS wird dem CSS hinzugefügt, das nach bootstrap.min.css erscheint. Probieren Sie es aus!

Nachteile:
1. Das entsprechende Menü der obersten Ebene ist nicht anklickbar
2. Nachdem die Maus zum Menü der zweiten Ebene gleitet, hat das Menü der obersten Ebene keinen Stil

Zweite Methode: Verwenden Sie die Funktionen von JQuery, um

zu erreichen

In Kombination mit Online-Tutorials kann das Problem durch die Verwendung von zwei Ereignissen in JQuery, spezifischem CSS, gelöst werden:

Code kopieren Der Code lautet wie folgt:

//Schließen Sie das Ereignis click.bs.dropdown.data-api und machen Sie das obere Menü anklickbar
$(document).off('click.bs.dropdown.data-api');
//Automatisch erweitern
$('.nav .dropdown').mouseenter(function(){
$(this).addClass('open');
});
//Automatisch schließen
$('.nav .dropdown').mouseleave(function(){
$(this).removeClass('open');
});

Diese Methode ermöglicht nicht nur das Anklicken des oberen Menüs, sondern auch den Verlust des Stils. Sie kann auch das Problem des Bootstrap-Mausschwebens lösen.