Twitter Bootstrap: Call a js function when a dropd

Question

Is there an event that I can tie into that is fired when a bootstrap dropdown is closed or toggled?

Answer 1

This is how Bootstrap v2.3.2 closes the menu no matter what you click on:

$('html').on('click.dropdown.data-api', function () {
    $el.parent().removeClass('open')
});

If you're using v2.x, this could be used to know when a menu will be closed. However, keep in mind that this is triggered on every click. If you only need to execute something when a menu is really closed (which is probably all the time), you'll need to track when one is opened in the first place. The accepted answer is probably a better solution in that regard.

In Boostrap v3.0.0, however, the drop menu supports four separate events:

show.bs.dropdown: This event fires immediately when the show instance method is called.

shown.bs.dropdown This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).

hide.bs.dropdown This event is fired immediately when the hide instance method has been called.

hidden.bs.dropdown This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).

From Bootstrap's documentation.

Answer 2

From twitter bootstrap official page:

$('#myDropdown').on('hide.bs.dropdown', function () {
  // do something…
});

hide.bs.dropdown is one of 4 events described here.

Update (13-Apr-16)

These events also work same in Bootstrap 4. Bootstrap v4 Documentation.

Answer 3

There isn't a documented event, but you can use the .open class of the .dropdown and the jQuery click() event:

$('#the-dropdown').click(function () {
    if($(this).hasClass('open')) {
        alert('it works');
    }
});

For toggling, use just the click() event.

Here is the jsfiddle.

Answer 4

I did mine as shown below.

HTML:

<ul class="nav navbar-nav navbar-right">
                    <li id="theme_selector" class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Theme <b class="caret"></b></a>
                        <ul id="theme" class="dropdown-menu" role="menu">
                            <li><a href="#">Amelia</a></li>
                            <li><a href="#">Cerulean</a></li>
                            <li><a href="#">Cyborg</a></li>
                            <li><a href="#">Cosmo</a></li>
                            <li><a href="#">Darkly</a></li>
                            <li><a href="#">Flatly</a></li>
                            <li><a href="#">Lumen</a></li>
                            <li><a href="#">Simplex</a></li>
                            <li><a href="#">Slate</a></li>
                            <li><a href="#">Spacelab</a></li>
                            <li><a href="#">Superhero</a></li>
                            <li><a href="#">United</a></li>
                            <li><a href="#">Yeti</a></li>
                        </ul>
                    </li>
                </ul>

Script

$('#theme li').click(function () {
   switch_style($(this).text());
        });

Works great

Answer 5

Nolan, I assume what you mean by "This did not work" is: when the user clicks anywhere else on the page and not properly closes the button/dropdown. You can monitor those clicks (anywhere on the document) by:

$(document).click(function() {
    //check which element was clicked on
});

Answer 6

In the end, the only reliable method that I found was to use jquery's data api to store the state of the dropdown and add click events to the button and the document.

$(document).ready(function() {

    $('#dropdown').data('open', false);

    $('#dropdown-button').click(function() {
        if($('#dropdown').data('open')) {
            $('#dropdown').data('open', false);
            update_something();
        } else
            $('#dropdown').data('open', true);
    });

    $(document).click(function() {
        if($('#dropdown').data('open')) {
            $('#dropdown').data('open', false);
            update_something();
        }
    });

});