twitter-bootstrapBootstrap Dropdowns

Parameters

MethodsExample
Call Via Javascript$('.dropdown-toggle').dropdown();
Toggles the dropdown$('.dropdown-toggle').dropdown('toggle')
Event TypeDescription
show.bs.dropdownThis event fires immediately when the show instance method is called.
shown.bs.dropdownThis event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).
hide.bs.dropdownThis event is fired immediately when the hide instance method has been called.
hidden.bs.dropdownThis event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).
Event Handler Example$(element).on('show.bs.dropdown', function () { // do something… })

Remarks

When calling Dropdown Via Javascript $('.dropdown-toggle').dropdown(), the data-api i.e data-toggle="dropdown" still required. Read More

How to Use

Use .dropdown class on parent element of dropdown menu.

Add the .dropdown-menu class to a element to initialize the dropdown menu plugin.

Call the plugin by Using class .dropdown-toggle and the data-toggle="dropdown" attribute on a button or a Hyperlink.

Basic Example

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">Option One</a></li>
    <li><a href="#">Option two</a></li>
    <li><a href="#">More Options</a></li>
  </ul>
</div>