Comment empêcher la fermeture de la liste déroulante Bootstrap lorsque vous cliquez à l'intérieur ?-js tutoriel-php.cn

Comment empêcher la fermeture de la liste déroulante Bootstrap lorsque vous cliquez à l'intérieur ?

Barbara Streisand

Libérer： 2024-10-25 12:48:02

original

719 Les gens l'ont consulté

How to Prevent Bootstrap Dropdown from Closing When Clicking Inside?

Empêcher la fermeture en cliquant dans le menu déroulant

Dans Twitter Bootstrap, le menu déroulant se fermera en cliquant (même en cliquant dans le menu). Pour éviter cela, vous pouvez attacher un gestionnaire d'événements de clic à la liste déroulante et ajouter le fameux event.stopPropagation().

<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">
          <ol class="carousel-indicators">
            <li data-slide-to="0" data-target="#carousel"></li>
            <li class="active" data-slide-to="1" data-target="#carousel"></li>
          </ol>
          <div class="carousel-inner">
            <div class="item">
              <img alt="" class="img-rounded" src="img1.jpg">
            </div>
            <div class="item active">
              <img alt="" class="img-rounded" src="img2.jpg">
            </div>
          </div>
          <a data-slide="prev" role="button" href="#carousel" class="left carousel-control">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a data-slide="next" role="button" href="#carousel" class="right carousel-control">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
        </div>
      </li>
    </ul>
  </li>
</ul></code>

Copier après la connexion

Cette méthode semble simple et très courante, mais comme les gestionnaires d'événements des contrôles carrousel (et les indicateurs de carrousel) sont délégués à l'objet document, elle n'est pas adaptée à ces éléments (contrôles précédent/suivant , etc. ) seront "ignorés".

<code class="js">$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event){
    // 不会向document 节点传播事件
    // 所以委托的事件不会被触发
    event.stopPropagation();
});</code>

Copier après la connexion

Se fier aux événements masqués/masqués de la liste déroulante Twitter Bootstrap n'est pas une solution pour les raisons suivantes :

Les objets événement fournis par ces deux gestionnaires d'événements ne font pas référence à l'objet cliqué. élément .
Il n'y a aucun contrôle sur le contenu du menu déroulant, donc la classe ou l'attribut du drapeau ne peut pas être ajouté.

Ce qui suit est une démo de violon du comportement normal et une démo de violon avec event.stopPropagation() ajouté.

Mise à jour

Merci Roman pour la réponse. J'ai également trouvé une autre réponse, comme suit :

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

Copier après la connexion

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!