Как программно вызвать всплывающее окно meteor-account-ui-bootstrap-3

Question

Я использую meteor- account -ui-bootstrap-3 для своего приложения meteor.js. У меня есть кнопка, чтобы вызвать всплывающее окно входа в систему. Я использую следующий код, чтобы добавить класс CSS в #login-dropdown-list, Всплывающее окно появляется, когда я ставлю точку останова после оператора addClass. Но он исчезает после запуска функции. я добавить $('#login-username-or-email').focus(); но это тоже не работает. Здесь что-то не так?

'click .login-btn': function(e){
    e.preventDefault();
    $('#login-dropdown-list').addClass('open');
    $('#login-username-or-email').focus();
  }

Если я вручную добавлю "открыть" #login-dropdown-list, Оно работает. Что-нибудь вызывает закрытие события? Например, нажмите на вне всплывающего окна?

Заранее спасибо.

Джейк

Answer 1

Я сталкивался с этим, пытаясь решить ту же проблему. Похоже, что проблема связана с "всплывающим" событием "щелчок" в раскрывающемся списке.

Я смог решить эту проблему, заменив e.preventDefault() (который в любом случае служит другой цели) на e.stopPropagation (), который останавливает всплывающее окно. Также обратите внимание, что если вы хотите вообще отказаться от селекторов jquery, вы можете использовать Template._loginButtons.toggleDropdown(); Ваш пример будет выглядеть примерно так:

'click .login-btn': function(e){
    e.stopPropagation();
    Template._loginButtons.toggleDropdown();
}

-или же-

'click .login-btn': function(e){
    e.stopPropagation();
    $('#login-dropdown-list').addClass('open');
    $('#login-username-or-email').focus();
}

Answer 2

На мой взгляд, есть два варианта:

$("#login-buttons .dropdown-toggle").dropdown("toggle");

а также

$("#login-buttons").removeClass("open");

Я знаю, что это не очень хороший способ, но, к сожалению, бутстрап не дает нам что-то вроде dropdown("close"), Покопавшись в коде загрузчика, я обнаружил, что загрузчик предоставляет конструктор выпадающего списка, поэтому мы можем сделать что-то подобное.

$.fn.dropdown.Constructor.prototype.close = function() {
  this.parents(".dropdown").addClass("remove");
};

$.fn.dropdown.Constructor.prototype.open = function() {
  this.parents(".dropdown").addClass("open");
};

Тогда мы можем позвонить:

$("#login-buttons .dropdown-toggle").dropdown("open");
$("#login-buttons .dropdown-toggle").dropdown("close");

По крайней мере, это в одном месте, так что вы можете связать с ним некоторые события позже.