Lorsque vous utilisez le composant Bootstrap Navigation Bar, si votre barre de navigation dispose d'un menu déroulant, cette navigation avec un menu déroulant ne fera flotter le menu déroulant que lorsque vous cliquez sur. Son propre attribut HREF sera invalide, ce qui signifie qu'il perd la fonction hyperlienne. Ce n'est pas ce que je veux. J'espère que le lien de la barre de navigation peut ouvrir son lien normalement, mais il a également besoin de la fonction de menu déroulant et commencer à lancer ~
Tout d'abord, résolvez le problème de clic sur la barre de navigation avec un menu déroulant. L'effet de menu déroulant est implémenté par JS. L'analyse du fichier bootstrap.js montre que Bootstrap a écrit le menu déroulant en tant que plug-in jQuery et a trouvé quelques phrases clés dans le segment de code déroulant:
// s'applique aux éléments déroulants standard // ========================================================================== $ (Document) .on ('Click.bs.dropdown.data-api',. form ', fonction (e) {e.stoppropagation ()}). on (' click.bs.dropdown.data-api ', toggle, dropdown.prototype.toggle) .on (' keydown.bs.dropdown.data-api ', toggle +', [role = menu] ', dropdown.pototype.kekeddown)Après avoir trouvé quelques codes clés, j'ai pensé à une solution. Fermez simplement l'événement click.bs.dropdown.data-api et ce sera OK. Le code est le suivant:
$ (document) .ready (function () {$ (document) .off ('click.bs.dropdown.data-api');});Le test de code ci-dessus est efficace. La barre de navigation peut être cliquée pour résoudre le problème. Ce qui suit est de résoudre le problème du menu de survol et de mise à la baisse de la souris. C'est relativement simple. Il peut être mis en œuvre avec l'événement de souris de JQuery. Le code est le suivant:
$ (document) .ready (function () {dropDownOpen (); // call}); / *** élargir le sous-menu lorsque la souris passe, afin de ne pas avoir besoin de cliquer pour étendre * / fonction DropdownOpen () {var $ dropdownli = $ ('li.dropdown'); $ dropdownli.mouseOver (function () {$ (this) .addclass ('open');}). Mouseout (function () {$ (this) .removeclass ('open');});}Ce qui précède est le code d'implémentation de la barre de navigation bootstrap qui peut être cliqué et plané pour afficher le menu déroulant. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!