Comment empêcher les listes déroulantes Bootstrap de se fermer lors de clics internes tout en conservant la fonctionnalité de gestionnaire d'événements délégué ?

Gérer les listes déroulantes : empêcher la fermeture du menu lors de clics internes

Le défi des listes déroulantes Twitter Bootstrap est leur tendance à se fermer à chaque clic, y compris ceux effectués dans le menu lui-même. Pour surmonter cette limitation, il est courant d'attacher un gestionnaire d'événements au menu déroulant avec le simple event.stopPropagation().

Cependant, cette solution présente un inconvénient : les gestionnaires d'événements délégués pour des éléments tels que les contrôles de carrousel deviennent inefficaces. Pour comprendre cela, considérons le code suivant :

<code class="html"><ul class="nav navbar-nav">
  <li class="dropdown mega-dropdown">
    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
      <i class="fa fa-list-alt"></i> Menu item 1
      <span class="fa fa-chevron-down pull-right"></span>
    </a>
    <ul class="dropdown-menu mega-dropdown-menu">
      <li>
        <div id="carousel" class="carousel slide" data-ride="carousel">
          <!-- Carousel content -->
        </div>
      </li>
    </ul>
  </li>
</ul></code>

<code class="javascript">$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event){
    // The event won't be propagated up to the document NODE and 
    // therefore delegated events won't be fired
    event.stopPropagation();
});</code>

En attachant le gestionnaire d'événements à ul.dropdown-menu.mega-dropdown-menu, nous avons l'intention d'empêcher la fermeture du menu à chaque clic. en son sein. Cependant, les gestionnaires d'événements délégués enregistrés sur l'objet document pour des éléments tels que les contrôles de carrousel sont rendus inefficaces, ce qui les empêche de déclencher des événements.

Solution :

Pour résoudre ce problème problème, vous pouvez utiliser le code suivant :

<code class="javascript">$(document).on('click', 'someyourContainer .dropdown-menu', function (e) {
  e.stopPropagation();
});</code>

En utilisant $(document).on('click', ...), vous vous assurez que le gestionnaire d'événements est attaché à l'ensemble de l'objet document. Cela lui permet d'intercepter les clics dans le menu déroulant tout en permettant aux gestionnaires d'événements délégués de fonctionner correctement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!