Modifier le menu déroulant dans Bootstrap pour l'afficher directement au survol de la souris [original]_javascript skills

Récemment, mon entreprise a utilisé la fonction de menu de Bootstrap lors de la création de pages Web. Elle souhaitait afficher le menu secondaire au survol de la souris. J'ai donc fait quelques recherches et découvert qu'il existe probablement deux méthodes.

La première méthode : modifier la feuille de style

En fait, c'est relativement simple. Il vous suffit d'ajouter un css pour définir le statut du survol et de définir le menu déroulant pour bloquer le css spécifique :

.

Copier le code Le code est le suivant :

.nav > li:hover .dropdown-menu {affichage : bloc ;}

Ce CSS est ajouté au CSS qui apparaît après bootstrap.min.css. Essayez-le !

Inconvénients :
1. Le menu de niveau supérieur correspondant n'est pas cliquable
2. Une fois que la souris a glissé vers le menu de deuxième niveau, le menu de niveau supérieur n'a plus de style

Deuxième méthode : Utiliser les fonctionnalités de JQuery pour réaliser

Combiné à des tutoriels en ligne, le problème peut être résolu en utilisant deux événements en JQuery, spécifiques en CSS :

Copier le code Le code est le suivant :

//Fermez l'événement click.bs.dropdown.data-api et rendez le menu supérieur cliquable
$(document).off('click.bs.dropdown.data-api');
//Développer automatiquement
$('.nav .dropdown').mouseenter(function(){
$(this).addClass('open');
});
//Fermer automatiquement
$('.nav .dropdown').mouseleave(function(){
$(this).removeClass('open');
});

Cette méthode permet non seulement de cliquer sur le menu supérieur, mais le style ne sera pas perdu. Elle peut également résoudre le problème du survol de la souris Bootstrap. Elle est recommandée à tout le monde.