Récemment, la société a utilisé la fonction de menu bootstrap pour créer des pages Web. Il était nécessaire de planer la souris pour afficher le menu secondaire, alors je l'ai étudié et j'ai constaté qu'il existe probablement deux méthodes.
La première méthode: modifiez la feuille de style
En fait, c'est relativement simple. Il vous suffit d'ajouter un CSS pour définir l'état de survol et définir le menu déroulant sur bloquer. Pour CSS spécifique:
La copie de code est la suivante:
.nav> li: hover .dropdown-menu {display: block;}
Cette phrase CSS est ajoutée au CSS qui apparaît après bootstrap.min.css, essayez-le!
défaut:
1. Le menu supérieur correspondant ne peut pas être cliqué
2. Après que la souris a glissé au menu secondaire, le menu supérieur n'a pas de style
La deuxième méthode: utilisez les fonctionnalités de jQuery pour implémenter
Combiné avec des tutoriels en ligne, deux événements à JQuery peuvent résoudre le problème. Pour CSS spécifique:
La copie de code est la suivante:
// Fermez l'événement click.bs.dropdown.data-api pour rendre le menu supérieur cliquable
$ (document) .off ('click.bs.dropdown.data-api');
// Origine automatiquement
$ ('. NAV .Dropdown'). MouseEnter (function () {
$ (this) .addclass ('open');
});
//Original
$ ('. Nav .dropdown'). Mouseleave (function () {
$ (this) .removeclass ('open');
});
Cette méthode vous permet non seulement de cliquer sur le menu supérieur, mais ne perd pas non plus le style, mais résout également le problème du plan de souris bootstrap. Il est recommandé à tout le monde.