Le composant déroulant Bootstrap du composant JS étend les compétences de survol event_javascript

Le composant déroulant dans la barre de navigation bootstrap est utilisé très fréquemment. Cet article présentera le composant déroulant dans bootstrap pour étendre l'événement de survol. Le contenu spécifique est le suivant

.

Comment implémenter cet événement de survol ? En fait, cela peut être facilement réalisé en fonction de l'événement de clic du composant déroulant. Ceux qui font attention peuvent constater que lorsque la liste déroulante apparaît, son parent aura un attribut de classe ouvert. Il nous suffit d'ajouter ou de 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 : Voir

Ce qui suit est le code complet du plug-in js :

// bootstrap响应式导航条<br>;(function($, window, undefined) {
  // outside the scope of the jQuery plugin to
  // keep track of all dropdowns
  var $allDropdowns = $();
 
  // if instantlyCloseOthers is true, then it will instantly
  // shut other nav items when a new one is hovered over
  $.fn.dropdownHover = function(options) {
 
    // the element we really care about
    // is the dropdown-toggle's parent
    $allDropdowns = $allDropdowns.add(this.parent());
 
    return this.each(function() {
      var $this = $(this).parent(),
        defaults = {
          delay: 500,
          instantlyCloseOthers: true
        },
        data = {
          delay: $(this).data('delay'),
          instantlyCloseOthers: $(this).data('close-others')
        },
        options = $.extend(true, {}, defaults, options, data),
        timeout;
 
      $this.hover(function() {
        if(options.instantlyCloseOthers === true)
          $allDropdowns.removeClass('open');
 
        window.clearTimeout(timeout);
        $(this).addClass('open');
      }, function() {
        timeout = window.setTimeout(function() {
          $this.removeClass('open');
        }, options.delay);
      });
    });
  };
 
  $('[data-hover="dropdown"]').dropdownHover();
})(jQuery, this);

Vous pouvez voir que l'auteur a ajouté un point-virgule ; devant le plug-in pour augmenter la compatibilité du plug-in, car le code js précédent n'a peut-être pas été écrit ;. , cela peut provoquer une erreur js car il n'y a pas de saut de ligne.

Paramètres facultatifs
delay : (facultatif) Délai en millisecondes. C'est le temps d'attendre avant de fermer la liste déroulante lorsque la souris ne survole plus le menu déroulant ou le bouton/élément de navigation, l'activant. La valeur par défaut est 500.
instantCloseOthers : (facultatif) Une valeur booléenne qui, si elle est vraie, fermera immédiatement tous les autres menus déroulants utilisés lorsque vous lancerez un nouveau sélecteur correspondant à la navigation. La valeur par défaut est vraie.

Après avoir ajouté le code js ci-dessus, l'effet ne peut pas être obtenu pour le moment, car nous devons faire une étape supplémentaire, qui consiste à ajouter l'attribut data-* à l'élément :

data-hover="dropdown"
Code complet de l'élément HTML :

Copier le code Le code est le suivant :

Les options peuvent être définies via les attributs de données, ou via data-delay et data-close-others

Copier le code Le code est le suivant :

Bien sûr, il existe le moyen le plus simple, qui consiste à utiliser le contrôle de survol CSS

[/code].nav> li:hover .dropdown-menu {display: block;}[/code]
Une telle ligne de code peut également obtenir l'effet de survol souhaité, mais si vous cliquez sur le composant en survolant, puis survolez un autre composant, l'effet suivant apparaîtra :

Ce qui précède explique comment utiliser le composant déroulant Bootstrap pour étendre l'événement de survol. J'espère qu'il sera utile à tout le monde de maîtriser l'événement de survol.