如何以编程方式触发 meteor-accounts-ui-bootstrap-3 弹出窗口

Question

我将 meteor-accounts-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

我认为有两种选择：

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

和

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

我知道这不是一个好方法，但不幸的是 bootstrap 并没有为我们提供像 dropdown("close") 这样的东西。在深入研究 bootstrap 的代码后，我发现 bootstrap 暴露了下拉菜单的构造函数，所以我们可以做这样的事情。

$.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");

至少它在一个地方，所以你可以稍后绑定一些事件。

Answer 2

我在尝试解决同样的问题时遇到了这个问题。问题似乎是“点击”事件“冒泡”到下拉菜单。

我能够通过用 e.stopPropagation() 替换 e.preventDefault()（在任何情况下都有不同的目的）来解决它，这会阻止冒泡。另请注意，如果您想完全避免使用 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();
}