Подтвердить что ты не робот

Twitter Bootstrap: вызов функции js при выпадающем меню

Есть ли событие, которое я могу связать с этим, запускается, когда выпадающее окно начальной загрузки закрывается или переключается?

4b9b3361

ОТВЕТЫ

Ответ 1

В конце концов, единственным надежным методом, который я нашел, было использование данных jquery api для хранения состояния выпадающего списка и добавления событий нажатия к кнопке и документу.

$(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();
        }
    });

});

Ответ 3

Так как Bootstrap v2.3.2 закрывает меню независимо от того, на что вы нажимаете:

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

Если вы используете v2.x, это можно использовать, чтобы узнать, когда меню будет закрыто. Однако имейте в виду, что это срабатывает при каждом нажатии. Если вам нужно только что-то выполнить, когда меню действительно закрыто (что, вероятно, все время), вам нужно будет отслеживать, когда он открывается в первую очередь. Принятый ответ, вероятно, является лучшим решением в этом отношении.

В Boostrap v3.0.0, однако, меню переходов поддерживает четыре отдельных события:

show.bs.dropdown. Это событие срабатывает сразу же после вызова метода экземпляра show.

показано .bs.dropdown Это событие запускается, когда выпадающее окно становится видимым для пользователя (будет ждать перехода CSS для завершения).

hide.bs.dropdown Это событие запускается сразу же после вызова метода экземпляра hide.

hidden.bs.dropdown Это событие запускается, когда выпадающее меню закончилось скрытым от пользователя (будет ждать перехода CSS для завершения).

Из Документация по загрузке.

Ответ 4

Не зарегистрировано событие, но вы можете использовать класс .open события .dropdown и jQuery click():

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

Для переключения используйте только событие click().

Здесь находится jsfiddle.

Ответ 5

Нолан, я предполагаю, что вы подразумеваете под "Это не работает": когда пользователь щелкает в другом месте страницы и не закрывает кнопку/выпадающий список. Вы можете отслеживать эти клики (в любом месте документа):

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

Ответ 6

Я сделал свое, как показано ниже.

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

Отлично работает