How to open Bootstrap popup programmatically

Question

I am trying to open a Bootstrap dropdown when I click an item in another dropdown.

The idea is to select a city from the first drop-down list - then the script will automatically open the second drop-down menu with areas (and only show areas corresponding to the selected city).

Here is my JS:

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

and this is 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> 

Answer 1

For Bootstrap 3, you can simply add a “public” class to the dropdown tag. Removing it closes the dropdown menu.

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

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

Answer 2

The best way is to check if the dropdown menu is .dropdown('toggle') and then use .dropdown('toggle') .

A couple of things to know about:

• If you want to call it by clicking on another element, you must kill the click event on another element - otherwise Bootstrap will treat it as a click outside the drop-down list and immediately close it.
• $('.dropdown').addClass('open') not a good replacement for $('.dropdown-toggle').dropdown('toggle') as suggested in other answers, because this will cause the dropdown the list will remain open instead of closing when you click on a component.

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'); } }); 

Script example

Answer 3

The Bootstrap drop-down list plugin waits for the "click.bs.dropdown" event to display the menu, so in this case:

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

must work. This will not trigger other 'click' events for the same element, if any.

Answer 4

dropdown('toggle') works fine for me when using a button tag.

Js

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

HTML

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

Answer 5

If absolutely none of them does the trick, 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 

Despite the fact that the above will work, I do not recommend using it, since it is a bit hacked.

Answer 6

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, but it will also prevent the button from being pressed.

Answer 7

This works for me.

 $('.dropdown-toggle').click(function (ev) { ev.stopPropagation(); $(this).parent().toggleClass('open'); }); 

Markup:

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

Answer 8

just use .click() in the data switch element but don't forget e.stopPropagation()

This one simple line took me hours, I hope it helps :)

Answer 9

most of the time acts as a manual action:

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

Answer 10

If you open a drop-down menu, you can see a selector that changes the display of the drop-down menu. In bootstrap v3.0.0 css selector:

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

Thus, the public class must be added to the parent element of the node element with the class .dropdown-menu. In other versions, if it has been modified, perhaps the correct selector can be found in the same way.

Answer 11

Try the following: $ ('# sidebar_filter_areas'). click ();

Answer 12

According to the boot docs, you can simply use this:

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