web-dev-qa-db-fra.com

Comment ouvrir Bootstrap dropdown par programme

J'essaie d'ouvrir un menu déroulant Bootstrap lorsque je clique sur un élément d'un autre menu déroulant.

L'idée est de sélectionner une ville dans le premier menu déroulant. Le script ouvrira alors automatiquement le second menu déroulant avec les zones (et affichera uniquement les zones correspondant à la ville choisie).

Voici mon JS: 

$('#sidebar_filter_city li').click(function(){   
    $('#sidebar_filter_areas').dropdown('toggle');
});

et c'est le HTML:

<div class="dropdown form-control">
   <div data-toggle="dropdown" id="sidebar_filter_cities" class="sidebar_filter_menu" data-value="jersey-city">Jersey City<span class="caret caret_sidebar"></span></div>           
   <input type="hidden" name="advanced_city" value="jersey-city">
   <ul id="sidebar_filter_city" class="dropdown-menu filter_menu" role="menu" aria-labelledby="sidebar_filter_cities">
      <li role="presentation" data-value="">All Cities</li>
      <li role="presentation" data-value="jersey-city">Jersey City</li>
      <li role="presentation" data-value="london">London</li>
      <li role="presentation" data-value="new-york">New York</li>
   </ul>        
   </div>
</div>

<div class="dropdown form-control">
    <div data-toggle="dropdown" id="sidebar_filter_areas" class="sidebar_filter_menu">All Areas<span class="caret caret_sidebar"></span> </div>           
        <input type="hidden" name="advanced_area" value="">
           <ul id="sidebar_filter_area" class="dropdown-menu filter_menu" role="menu" aria-labelledby="sidebar_filter_areas">
               <li role="presentation" data-value="">All Areas</li>
               <li role="presentation" data-value="east-harlem" data-parentcity="">East Harlem</li>
               <li role="presentation" data-value="greenville" data-parentcity="">Greenville</li>
               <li role="presentation" data-value="manhattan" data-parentcity="">Manhattan</li>
               <li role="presentation" data-value="northern-brooklyn" data-parentcity="">Northern Brooklyn</li>

                  .....
           </ul>        
        </div>    
</div>
javascripttwitter-bootstraptwitter-bootstrap-3
52
Crerem

Le meilleur moyen est de vérifier si la liste déroulante n'est pas déjà ouverte, puis d'utiliser .dropdown('toggle'). 

Quelques choses à prendre en compte:

  • Si vous voulez le déclencher en cliquant sur un autre élément, vous devez Tuer l'événement click sur l'autre élément - sinon Bootstrap le traitera comme un clic en dehors du menu déroulant et le fermera immédiatement.
  • $('.dropdown').addClass('open') n'est pas un bon remplacement pour $('.dropdown-toggle').dropdown('toggle') comme suggéré dans d'autres réponses , car le menu déroulant restera ouvert en permanence au lieu de se fermer lorsque vous cliquez sur le composant.

HTML:

<button class="btn btn-secondary trigger_button">Trigger dropdown</button><br><br>
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown
  </button>
  <div class="dropdown-menu">
  Stuff...
  </div>
</div>

JS:

$('.trigger_button').click(function(e){
  // Kill click event:
  e.stopPropagation();
  // Toggle dropdown if not already visible:
  if ($('.dropdown').find('.dropdown-menu').is(":hidden")){
    $('.dropdown-toggle').dropdown('toggle');
  }
});

Fiddle exemple

34
Yarin

Pour Bootstrap 3, vous pouvez simplement ajouter la classe 'open' à la balise déroulante. Le retirer ferme la liste déroulante.

$('.dropdown').addClass('open'); // Opens the dropdown
$('.dropdown').removeClass('open'); // Closes it

Cela peut fonctionner dans d'autres versions, mais je ne suis pas sûr.

23
mkandefer

Le plug-in déroulant de Bootstrap attend l'événement 'click.bs.dropdown' pour afficher le menu. Dans ce cas,

$('#sidebar_filter_areas').trigger('click.bs.dropdown');

devrait marcher. Cela ne déclenchera pas d’autres événements de «clic» sur le même élément, le cas échéant.

15
Eugene

dropdown('toggle') me convient parfaitement lorsque j'utilise la balise button.

JS

$("#mybutton").dropdown('toggle')

HTML

<button class="dropdown-toggle ban" role="button" data-toggle="dropdown" data-target="#" id="mybutton">...</button>
7
mendydo

Vous devez empêcher l’événement click de se propager aux éléments parents.

$('#sidebar_filter_city li').click(function(e){   
    $('#sidebar_filter_areas').dropdown('toggle');
    e.stopPropagation();
});

Vous pouvez également utiliser return false; qui fera la même chose, mais cela empêchera égalementPar défaut sur le clic.

3
Adam Lynch

Si absolument aucun d'entre eux ne fait le tour, vous pouvez faire quelque chose comme ce qui suit:

$('.dropdown').addClass('open'); // substitute with your own selector
$('.dropdown-toggle').attr('aria-expanded', true).focus(); // substitute with your own selector

Bien que ce qui précède fonctionne, je ne recommande pas de l’utiliser car c’est un peu hacky.

3
adamj

Essayez ceci: $ ('# sidebar_filter_areas'). Click ();

1
Wellington Gasparin

Selon bootstrap docs , vous pouvez simplement utiliser ceci:

$('.dropdown-toggle').dropdown();
1
MajiD

Cela fonctionne pour moi.

$('.dropdown-toggle').click(function (ev) {
    ev.stopPropagation();

    $(this).parent().toggleClass('open');
});

Balisage:

<div class="dropdown pull-right">
    <button class="btn btn-default dropdown-toggle task-actions" type="button"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        <img src="{{ asset('img/site/icons/menu.svg') }}" alt="Menu">
    </button>
    <ul id="dropdown-overview" class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>
1
LTroya

utilisez simplement .click() sur l'élément data-toggle mais n'oubliez pas e.stopPropagation()

ces simples lignes m'ont pris des heures, j'espère que c'est une aide :)

1
Peace Saravudecha

dans Bootstrap 4.x, les composants suivants doivent être appliqués:

  • li> .nav-item .dropdown
    • a> .nav-link> aria-expand
  • div> .dropdown-menu

L'ajout d'un écouteur d'événements click, qui déclenche le basculement d'une classe et d'une valeur bool, permet à ces classes de faire fonctionner la liste déroulante avec du javascript pur comme suit:

let status = false
const nav = document.getElementsByClassName('nav-item dropdown')[0]
nav.addEventListener('click', toggleDropdown)
function toggleDropdown () {
   if (status) {
      nav.classList.add('show')
      document.getElementsByClassName('nav-link dropdown-toggle')[0].setAttribute('aria-expanded', ' + status + ')
      document.getElementsByClassName('dropdown-menu').classList.add('show')
   } else {
      nav.classList.remove('show')
      document.getElementsByClassName('nav-link dropdown-toggle')[0].setAttribute('aria-expanded', ' + status + ')
      document.getElementsByClassName('dropdown-menu').classList.remove('show')
   }
   return status = !status
}
0
CagCak

Quelque chose que j'aime utiliser a un comportement légèrement plus attendu par l'utilisateur: 

if(!$('#myDropdown').hasClass('show')){
  $('#myDropdown').dropdown('toggle');
}

S'il est déjà ouvert, ne faites rien. S'il est fermé, alors il devrait s'ouvrir. 

0
Reed

Si vous inspectez le menu déroulant ouvert, vous pouvez voir le sélecteur qui modifie l’affichage du menu déroulant .

.open > .dropdown-menu {
    display: block;
}

Donc, la classe ouverte doit être ajoutée au noeud parent de l'élément avec la classe .dropdown-menu. Dans d'autres versions, s'il a été modifié, le sélecteur correct peut probablement être trouvé de la même manière.

0
Hamed Mahdizadeh

la plupart du temps, agir comme une action manuelle fonctionne:

$('#sidebar_filter_city li').click(function(){   
    $('#sidebar_filter_areas').click();
});
0
nopenope

Vous pouvez réaliser la même chose en utilisant du JavaScript natif comme ceci:

  document.getElementById ('XYZ'). cliquez sur ('ouvrir');

Cela fonctionne sur tous les navigateurs.

0
Vivek Mehta

Pour Bootstrap 4 utilisant Angular 6, j’utilisais ceci: 

<div class="dropdown-menu" id='logoutDropDownMenu' x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 40px, 0px); top: 0px; left: 0px; will-change: transform;">

Mon composant ts a cette fonction

 import { DOCUMENT } from '@angular/common';
 import { Inject } from '@angular/core';

export class HomeComponent implements OnInit {

  private toggleLogout: boolean;

  constructor(@Inject(DOCUMENT) private document: any){}


 toggleButton() {
    if (this.toggleLogout) {
      this.document.getElementById('logoutDropDownMenu').classList.add('show');
    } else {
      this.document.getElementById('logoutDropDownMenu').classList.remove('show');
    }
    this.toggleLogout = !this.toggleLogout;

  }
0
Levijatanu