Le composant déroulant dans la barre de navigation bootstrap est utilisé très fréquemment. Cet article présente l'événement d'extension de composante déroulante dans Bootstrap. Le contenu spécifique est le suivant
Comment mettre en œuvre cet événement de survol? En fait, il est facile à compléter en fonction de l'événement de clic du composant déroulant. Ceux qui sont prudents peuvent constater que lorsque la boîte déroulante apparaît, son parent aura un attribut de classe ouverte. Nous n'avons qu'à ajouter ou supprimer la classe ouverte au parent lors de l'écoute de l'événement de survol.
Plugin Boostrap-Hover-dropdown.js, URL de code hébergé sur GitHub: View
Voici le code du plugin JS complet:
// barre de navigation réactive de bootstrap <br>; (fonction ($, fenêtre, undefined) {// en dehors de la portée du plugin jQuery vers // garder une trace de toutes les dropdowns var $ alldropdowns = $ (); // Si instantanément les autres est vrai À propos de // est le parent de Dropdown-Toggle $ AllDropdowns = $ allDropdown.Add (this.parent ()); $ (this) .data ('closer-alhers')}, options = $ .extend (true, {}, paramètres, options, données), tempsout; $ this.hover (function () {if (options.InstantlyCloseothers ===) $ allDropdown.reMoveClass ('open'); window function () {timeout = window.setTimeout () {$ this.reMoveClass ('Open');}, Options.Delay);});Vous pouvez voir que l'auteur a ajouté un point-virgule devant le plug-in, ce qui augmente la compatibilité du plug-in, car le code JS précédent peut ne pas être écrit; Si le point-virgule n'est pas ajouté ici, cela peut provoquer une erreur JS car il n'y a pas de rupture de ligne.
Paramètres facultatifs
Délai: (paramètre facultatif) retard en millisecondes. C'est le moment de fermer le licenciement avant que la souris ne soit plus dans le menu déroulant ou l'élément bouton / navigation, activez-le. La valeur par défaut est de 500.
Instantanément CLOSE Mothers: (Paramètre facultatif) Une valeur booléenne, si elle est vraie, fermera immédiatement tous les autres menus déroulants lorsque vous démarrez une nouvelle navigation de correspondance de sélecteur. La valeur par défaut est vraie.
Après avoir ajouté le code JS ci-dessus, l'effet ne peut pas être réalisé pour le moment, car nous devons faire une autre étape, qui consiste à ajouter des attributs de données à l'élément:
data-hover = "dropdown"
Code d'élément HTML complet:
Copiez le code comme suit: <a href = "javascript:;" data-toggle = "dropdown" data-hover = "dropdown"> </a>
Les options peuvent être définies via des attributs de données, ou par le délai de données et les autres
Copiez le code comme suit: <a href = "#" data-toggle = "dropdown" data-hover = "dropdown" data-delay = "1000" data-close-alhers = "false"> </a>
Bien sûr, il y a aussi le moyen le plus simple, qui est d'utiliser le CSS pour contrôler
[/ code] .nav> li: hover .dropdown-menu {affiche: bloc;} [/ code]
Ce type de code peut également réaliser l'effet de survol souhaité, mais si vous cliquez sur le composant lorsque vous surveillez, puis accédez à un autre composant pour planer, l'effet suivant apparaît:
Si vous souhaitez toujours apprendre en profondeur, vous pouvez cliquer ici pour apprendre et vous attacher deux sujets passionnants: Tutoriel d'apprentissage bootstrap Tutoriel Bootstrap
Ce qui précède est la méthode d'utilisation du composant déroulant Bootstrap que vous avez partagé avec vous. J'espère qu'il vous sera utile de maîtriser l'événement en volants.