Kürzlich hat das Unternehmen die Bootstrap -Menüfunktion verwendet, um Webseiten zu erstellen. Es war notwendig, die Maus zu bewegen, um das sekundäre Menü anzuzeigen. Deshalb habe ich es untersucht und festgestellt, dass es wahrscheinlich zwei Methoden gibt.
Die erste Methode: Ändern Sie das Stilblatt
Tatsächlich ist es relativ einfach. Sie müssen nur ein CSS hinzufügen, um den Schwebestand festzulegen und das Dropdown-Menü so einzustellen, dass sie blockiert werden. Für bestimmte CSS:
Die Codekopie lautet wie folgt:
.nav> li: Hover .dropdown-menu {display: block;}
Dieser Satz CSS wird dem CSS hinzugefügt, der nach Bootstrap.min.css erscheint, versuchen Sie es!
Mangel:
1. Das entsprechende obere Menü kann nicht geklickt werden
2. Nachdem die Maus zum sekundären Menü gleitet, hat das obere Menü keinen Stil
Die zweite Methode: Verwenden Sie die Funktionen von JQuery zum Implementieren
In Kombination mit Online -Tutorials können zwei Veranstaltungen in JQuery das Problem lösen. Für bestimmte CSS:
Die Codekopie lautet wie folgt:
// Schließen Sie das Ereignis click.bs.dropdown.data-api, um das obere Menü zu klicken
$ (Dokument) .off ('click.bs.dropdown.data-api');
// Herkunft automatisch
$ ('. nav .dropdown'). mouseenter (function () {
$ (this) .AddClass ('offen');
});
//Original
$ ('. nav .dropdown'). Mouseleave (function () {
$ (this) .removeclass ('open');
});
Mit dieser Methode können Sie nicht nur auf das obere Menü klicken, sondern auch den Stil nicht verliert, sondern auch das Problem der Bootstrap -Maus -Schwebung löst. Es wird allen empfohlen.