How to open Bootstrap dropdown programmatically

Question

I\'m trying to open a Bootstrap dropdown when I click a item of another dropdown.

The idea is to select a city from the first drop down - then the script will auto o

Answer 1

For Bootstrap 4 using Anuglar 6 i used this:

<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;">

My component ts file has this function

 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;

  }

Answer 2

For Bootstrap 3 you can just add the 'open' class to the dropdown tag. Removing it closes the dropdown.

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

This may work in other versions, but I'm not sure.

Answer 3

You need to stop the click event from bubbling to parent elements

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

You can also use return false; which will do the same thing, but this will also preventDefault on the click.

Answer 4

If absolutely none of them are doing the trick, then you can do something like the following:

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

Although the above will work, I do not recommend using it as it's a bit hacky.

Answer 5

in Bootstrap 4.x, following components need to be effected:

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

Adding a click event listener, which triggers toggling a class and a bool value, for those classes make dropdown work with pure javascript as follows:

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
}

Answer 6

If you inspect opened drop down menu you can see selector which changes display of Dropdown menu. In bootstrap v3.0.0 css selector is:

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

So open class should be added to parent node of element with .dropdown-menu class. In other versions if it has been changed probably correct selector can be found in the same way.